Can you have a Single-Page Application in Nextjs?

Question

I am looking at Nextjs but have a questions about running a SPA in Nextjs. I need two separate sides to my application. One that is SSR, and another that is CSR while the user is logged in and browsing private routes.

I would like to use React-Router-dom for CSR portions, but I am unsure how that interferes with Nextjs' built in router.

I am completely unfamiliar with nextjs, so all information is super helpful at this point. Thank you.

Answer 1

It is generally not recommended to use a router other than Next's own router with Nextjs. You can read about the process of migrating from React Router here, but some of the reasons Nextjs has it's own router are:

• It uses a file-system based router which reduces configuration
• It supports shallow routing which allows you to change the URL without running data fetching methods
• Routes are always lazy-loadable

Nextjs can work extremely well to meet a mix of SSG/SSR/CSR needs when it is used correctly.

I would highly recommend checking out the Nextjs documentation on Next's approach to rendering:

The beauty of Next.js is that you can choose the most appropriate rendering method for your use case on a page-by-page basis, whether that's Static Site Generation, Server-side Rendering, or Client-Side Rendering.

Also, this page from the docs can direct you to more specific information about the types of rendering available in Nextjs including a good overview of some implementation details.