Example Request: integrate perspective into a next.js 15 app

[davepuchyr]

Example Request

Description of Problem:

next.js version 15 is arguably the most popular framework for web apps these days. It provides both client-side and server-side functionality. Code snippets like https://github.com/finos/perspective/blob/master/docs/md/how_to/javascript/nodejs_server.md and the code in https://github.com/finos/perspective/blob/master/rust/perspective-js/src/ts/perspective.node.ts give clues as to what needs to be done to integrate perspective into next.js, but leave a lot to be desired. A basic example of perspective in next.js, leveraging next.js' server-side for a client/server replicated table, would go a long way for adoption of perspective.

Potential Solutions:

Use the integrated server-side capabilities of next.js to obviate the need for a standalone perspecitve web socket server.

Don't use next.js' default bundler turbopack because it's not ready for wasm yet. Use webpack as outlined in https://perspective.finos.org/guide/how_to/javascript/importing.html#webpack.

[texodus]

Community contributed next.js example on prospective.co. There is also a react example in the repo. I'm down to accept contributions of new /examples projects if they are simple, maintainable and novel.

Use the integrated server-side capabilities of next.js to obviate the need for a standalone perspecitve web socket server.

This is not possible. You can either use Perspective client-only as in the example above, or you can use a WebSocket server (perhaps by integrating Perspective's node.js server as a Next.js Custom Server).

[davepuchyr]

This is not possible. You can either use Perspective client-only as in the example above, or you can use a WebSocket server (perhaps by integrating Perspective's node.js server as a Next.js Custom Server).

It seems like https://github.com/apteryxxyz/next-ws circumvents the need for a custom next.js server, which is a big deal. Any chance that you allow the HttpWebSocketServer to be injected into https://github.com/finos/perspective/blob/master/rust/perspective-js/src/ts/perspective.node.ts#L185? That'd be a trivial but very significant enhancement.

[texodus]

It seems like https://github.com/apteryxxyz/next-ws circumvents the need for a custom next.js server, which is a big deal.

As stated clearly in the warning-highlighted 2nd paragraph of this project's description, it "circumvents" a custom server by monkey patching the next-js runtime, which comes with the same drawbacks (plus the integration risk of monkeypatching).

[davepuchyr]

It seems like https://github.com/apteryxxyz/next-ws circumvents the need for a custom next.js server, which is a big deal.

As stated clearly in the warning-highlighted 2nd paragraph of this project's description, it "circumvents" a custom server by monkey patching the next-js runtime, which comes with the same drawbacks (plus the integration risk of monkeypatching).

Irrespective of next-ws, why not use dependency injection for HttpWebSocketServer? Injection is used for the other arguments; it's clearly the right thing to do.

[texodus]

why not use dependency injection for HttpWebSocketServer?

Why not use a custom server? It is clearly the right thing to do, as advised by both me and
the next.js documentation.

[davepuchyr]

why not use dependency injection for HttpWebSocketServer?

Why not use a custom server? It is clearly the right thing to do, as advised by both me and the next.js documentation.

They don't recommend it, they just state that it's possible:

• Before deciding to use a custom server, keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like Automatic Static Optimization.
• A custom server cannot be deployed on Vercel.
• When using standalone output mode, it does not trace custom server files. This mode outputs a separate minimal server.js file, instead. These cannot be used together.

You could have already implemented the injection of HttpWebSocketServer in the time that it's taken to reply to me.

Don't get me wrong, I sincerely appreciate your time and effort on this. For you, it's a 2-hour job, including integrating tests. For me, it's a multi-week job as we go back and forth with pull request knit picks after I make the 2-line change in WebSocketServer. It's literally 2 lines (61 characters):

constructor({ port = 8080, assets = ["./"], server = undefined, wss = undefined } = {}) {
...
        this._wss = typeof wss === HttpWebSocketServer ? wss : new HttpWebSocketServer({
            noServer: true,
            perMessageDeflate: true,
        });

Please 🙏

[texodus]

next-ws has the exact same restrictions, as I've already told you and their own docs make exceeding clear.

[davepuchyr]

It's not about next.js, it's about good software design. You use dependency injection for _server, but not for _wss. Weird.

[texodus]

You've confused _server with server, these are distinct types, the former is the Node.js server and instance property, the latter is a constructor argument which unrelated to networking docs