CODEWITHSUNDEEP
javascriptreactjsnext.jsnext.js13
Marin Radmilović
Marin Radmilović

Reputation: 188

Difference between Next 12 client-side routing and Next 13 server-centric routing

In the documentation for Next 13, it says like this:

Unlike the pages directory which uses client-side routing, the new router in the app directory uses server-centric routing to align with Server Components and data fetching on the server. With server-centric routing, the client does not have to download a route map and the same request for Server Components can be used to look up routes. This optimization is useful for all applications but has a larger impact on applications with many routes. Although routing is server-centric, the router uses client-side navigation with the Link Component - resembling the behavior of a Single-Page Application.

Please can someone explain the difference between client-side and server-centric routing in a bit more detail? It seems to me that in both cases components are rendered on the server, the client gets HTML and gets hydrated with JS. I'm not sure what the difference is except how the data is fetched.

Upvotes: 1

Views: 1196

Answers (2)

Yilmaz
Yilmaz

Reputation: 49321

In server-rendered components, the entire component gets built on the server and then sent to the client. the server does not send any javascript bundle, any dependency, and client will not parse anything. server will complete and sent it to the browser in JSON format and the browser will hydrate and then display it to the user.

That is why when you decide which components should be server-side rendered or client-side rendered components, you need to look at the component to see if the component has some sort of user interactivity, for example, button click. if there is a clickable component, that component should be rendered by the browser because the browser has to know the logic of how to handle the click once the click event occurs. The server will send the client related js code.

Since your component is rendered on the server, it will be easier to fetch the data from the database. Your server won't send any heavy libraries to the client, as the browser doesn't need to parse JavaScript, reducing parsing time and significantly improving performance. Moreover, by not fetching data on the client side, we avoid side effects (considering that useEffect has side effects), which is a huge win in terms of development simplicity and avoiding potential issues.

Also, since your server is going to render the component, your server can be scalable. you can always increase server resources so that computations will be finished faster. On the other hand, client resources are always limited

In app directory you can still use client components with use client directive on top of the page, but overall goal should be using as small amount of client components. Our goal is to minimize user wait time.

Upvotes: 3

destroycompiler
destroycompiler

Reputation: 21

Lets see client side routing first.

Client side routing means that when you navigate to a URL on the web page (maybe by clicking a link) then the JavaScript code on the browser (come from the website code) takes the request, updates the browser URL, fetches the data from the server through AJAX etc, and dynamically updates the contents of the web page, without reloading it.

  • Example of this is the react-router.

Since the NextJS docs mention 'client downloading the route-map', what is probably meant by this is that in client side routing the JS code should contain a routes list which are used in client side routing.

Server centric routing in NextJS

When you navigate between the URLs, the request directly goes to the server, the server fetches the required component which is to be rendered at that particular URL ( the page.js component ) and sends it. Now the application uses client-side navigation, i.e. the page doesn't reload and nextjs renders only the parts that change (the parts/components were fetched from the server)

If there's anything missed out please continue in the thread, I will be glad to learn more.

Upvotes: 2

Related Questions