NextJS Lite Example

Welcome! This is a simple example of using NextJS with server side only rendering, but with some small amount of JavaScript on the client side. It's purpose is to let you use all the awesome NextJS server side rendering with ReactJS, without needing to ship many hundreds of KB of JavaScript to the clients browser.

The code for this project is open source and available on Github

Server and client side rendering

This time was rendered by the formatNow function on the server: 2024-05-14 at 08:19:01.

Click This Button to generate the time with the same function on the client side:

See the browser.js file for how this is easily done.

Dialogs

Showing and hiding Dialogs is simple. Render the dialogs on the server, then show/hide them by listening to click events. Click This Button to show the Help Dialog, and see the browser.ts file for how this is done.

Dynamic Server Rendering

Sometimes you do need new UI to be generated, and without a UI framework in the browser this can be annoying. Luckily, since we already have React we can fetch from an API to get this new content as needed.

Click This Button to get some new UI from the /api/genUI API endpoint.

Using this Code

Feel free to take this code as a start point for your own project. While developing, you'll need to have two scripts running.

• npm run dev - this runs the normal NextJS development scripts
• npm run watch - this builds the client side only code custom to this project. NextJS knows nothing about this.

Put any browser-only code into the browser.ts file and it will be loaded on the page, but not executed on the server.

Other examples

• Use React on the client side without NextJS