Server Routing VS Client Routing

Vike has first-class support for both:

The UI framework Vike extensions (vike-react/vike-vue/vike-solid) use Client Routing. If you don't use such Vike extension, then Vike does Server Routing by default while you can opt into Client Routing.

Which one to choose?

If you don't use a UI framework Vike extension (vike-react/vike-vue/vike-solid), then we recommend to use Server Routing by default as it leads to a simpler architecture.

In general, there are two things to consider:

  • There is a trade-off between simplicity (Server Routing) and performance (Client Routing).
  • If client-side state needs to be preserved across navigation (e.g. the state of a music player component), then Client-side Routing is required.

Ultimately, which one to use depends on your use case.

Simple Websites

Apps with a simple architecture, such as portfolio or marketing websites, can afford the added complexity of Client Routing. Client-side Routing can be worth it for having smooth page navigations giving such website a polished touch.

Recommendation: Client-side Routing.

MVPs

As a startup that wants to deliver an MVP as quickly as possible, Server Routing is a sensible default choice. A simple architecture leads to higher development speed which means more features for your users.

Recommendation: Server-side Routing.

Highly polished apps

For example Netflix's web app: Netflix pushes for delightful user experiences, and has the budget and man-power to do it. For entertainment apps, the highly polished user experience can be worth the added complexity.

Recommendation: Client-side Routing.

Client-side state preserved across navigation

For example, on music players such as Spotify, the currently listened song should not be interrupted when the user navigates to a new page. Server Routing cannot preserve client-side state and, therefore, Client Routing is needed.

Requirement: Client-side Routing.

Nested Layouts

Similarly to the previous section, when using Nested Layouts, the state of the outer page is preserved, which means Nested Layouts cannot be implemented using Server Routing.

Requirement: Client-side Routing.

Third-party API

For example, if you use Shopify's or Facebook's GraphQL API, then Client Routing enables page navigation without doing any request to your Node.js server: when the user navigates to a new page, the user's browser directly communicates with the Shopify/Facebook GraphQL API and your Node.js server isn't involved at all.

The Shopify/Facebook GraphQL API may geographically live significantly closer to your user than your Node.js server; you may want to involve your Node.js server has less as possible.

Recommendation: Client-side Routing.