Is using Next.js without getServerSideProps pretty much the same as a Single Page Application (SPA)?

Next.js has 2 different ways to deliver a page:

  • Static site generation: a page that is the same for every visitor, already ready to serve (basically just a file!).
  • Server side rendered: a page that has to be "rendered", using information about the current request, user, session, etc. That page will vary depending on things like who is logged in, up to date information sourced from another source of data or the database, or something else like this.

In the Next.js lingo, we call the first one SSG and the second SSR.

For both of these cases, in addition, there may be client-side rendering done in the browser.

If you are using statically generated pages, with client-side rendering done in the browser, then what you have is pretty much the same as an SPA.

Almost!

Unlike a traditional SPA, with Next.js the statically generated pages can be rich and have a lot of earlier-generated content that you wouldn’t expect on a SPA page.

As an example you might create a page for every item in your product catalog. And when you load such a page, it already has the name of the product, can load an image, an so on, when the page is fetched.

You may then build upon this and render more stuff using queries made from the browser. For example you get the latest price and any discount codes via an API call, before revealing the price.

To understand this in more depth, your next step should be to read the Next.js documentation on this subject.

See the SSG (Static Site Generation) section on the Next.js site to learn more about both SSG and SSR, and how to build a site using these techniques.

Posted by Martin Capodici

.

Leave a Comment

Your email address will not be published. Required fields are marked *