So I finally dove straight into Next.js, thanks to my new job and as of late last week... my new blog! For the uninitiated - Next is a framework that extends React to allow for server-side rendering. Server-side rendering is the process of rendering your React components on the server and sending the fully rendered HTML to the client, rather than traditional way of sending an empty HTML file that gets it's content filled in by JavaScript once it's downloaded.

In your standard client-side React app, all of the JavaScript and HTML from the app are downloaded to a users browser or the "client". The downloaded JavaScript is then responsible for rendering said app.

With Next, we can make use of server-side rendering to have the component rendered on the server before sending it to the client. This means that the user receives a fully-rendered component or page from the server, which can be faster to load and better for search engine optimization.

So what happens when a component needs to update on the client?

When the server sends a page to the client, this page includes an initial state of the app and the JavaScript needed to "hydrate" it on the client-side.

Hydration is the process of taking the initial state provided by the server and using it to re-render the React components on the client-side. This allows your web app to load quickly and still being interactive once loaded.

The Benefits of Server-Side Rendering

Faster Load times

With server side rendering (SSR) the user receives a fully rendered page from the server, meaning the user can start interacting with the page much sooner than if they had to wait for the JavaScript to download and render the page. This can be pretty important for users with low-powered devices, since it can reduce the amount of processing required by their devices.

Better SEO

With SSR, search engines can index your pages more easily. Since the search engine can see the fully rendered HTML, rather than just the empty HTML file that gets filled in by JavaScript, crawlers index your pages with ease.

Improved Accessibility

Not everybody has JavaScript enabled, and if they don't, they won't be able to interact with a traditional web app. SSR allows users to interact with the page even if JavaScript is disabled making it the far more accessible approach to modern development.

All-in-all server-side rendering is a great way to improve the performance and accessibility of your web app. By rendering your pages and components on the server, you can improve the user performance and make your app more accessible to a wider audience. If you're interested in learning more about Next.js, I highly recommend checking out the Next.js documentation and giving the framework a go. Thanks for reading ✌🏼