Next.js: Question: Making part of the app static

Created on 1 Oct 2017  路  10Comments  路  Source: vercel/next.js

Hi,

We are in the process of re-building our homepage and landing pages infrastructure and considering NextJS as a prime candidate. I few questions came up which I could find an answer in google and I was hoping for your help.

  1. Is it possible to make part of the project static and part SSR?
  2. How fast is the build process? One of our key issues right now is that middleman takes almost 20 minutes building all the pages (we have hundreds of landing pages)
  3. When will V4 are planned to be out? We know that there has been great improvements with React16 and would really hate to miss on utilizing its full SSR power.
  4. Will V4 include any breaking changes? (I know that React16 wouldn't)

Thanks!!!!!

Most helpful comment

Note from maintainers

This is no longer needed when hosting on ZEIT Now.


Original message

If you're hosting with Zeit Now you could deploy static and dynamic versions of your app and use rules to route requests to the correct version based on path.

{
  "rules": [
    { "pathname": "/dynamic-page", "dest": "dynamic-mysite.now.sh" },
    { "pathname": "/other-dynamic-page", "dest": "dynamic-mysite.now.sh" },
    { "pathname": "/**", "dest": "static-mysite.now.sh" },
  ]
}

All 10 comments

Update 29 december 2019:

You can achieve hybrid static/dynamic applications with Next.js: https://nextjs.org/docs/basic-features/pages


Old reply from 2 years ago.

Is it possible to make part of the project static and part SSR?

This is currently not possible (at least with the client side rendering) you either have a static or a dynamic app 馃槃

How fast is the build process? One of our key issues right now is that middleman takes almost 20 minutes building all the pages (we have hundreds of landing pages)

It highly depends, @arunoda might have some insights 馃憤

When will V4 are planned to be out? We know that there has been great improvements with React16 and would really hate to miss on utilizing its full SSR power.

We're planning to release it very soon, we've waited a few days to make sure there are no issues 馃憤

Will V4 include any breaking changes? (I know that React16 wouldn't)

Yes and no, we will only support React 16 going forward 馃憣 React 15 won't work with v4

Thanks @timneutkens !!!

What do you mean its not possible with the client side rendering? I only want to be able to render part of the site with SSR, and generate another part staticly. I think I read in the docs that anything under the static directory will be generated in the build process and the rest will be accessible via SSR

@timneutkens @aviramga you could totally combine a static site + next.js dynamic.

  1. Use something like a cache but instead of memory save to disk, you just need to check if the file exists to send it or render, create it and send the HTML to the user.
  2. Just create a simple static site completely outside Next.js and use something like path aliases to combine them, your static site in this case would not be part of the Next.js.

So you could, my recommendation btw is (1), just use Next.js and save the static HTML to a cache (either in-memory or FS-based).

Thanks @sergiodxa ! What you're suggesting (correct me if Im wrong) is to have 2 completely separate code bases, one for static pages and one for nextjs. So there is no way I can manage both my static and SSR page in the same project with nextjs?

Yeah, or use Next.js for everything and cache to the file system (maybe S3) the HTML so after a first request you can just server the file as a static HTML

@sergiodxa Thanks! I think I get it now. And what about the performance of the static pages build process? we have hundreds of pages and we constantly add and update them

Note from maintainers

This is no longer needed when hosting on ZEIT Now.


Original message

If you're hosting with Zeit Now you could deploy static and dynamic versions of your app and use rules to route requests to the correct version based on path.

{
  "rules": [
    { "pathname": "/dynamic-page", "dest": "dynamic-mysite.now.sh" },
    { "pathname": "/other-dynamic-page", "dest": "dynamic-mysite.now.sh" },
    { "pathname": "/**", "dest": "static-mysite.now.sh" },
  ]
}

Thanks @gragland Sounds interesting! I'll definitely look into that

@gragland @aviramga don't forget to send /_next requests to dynamic-mysite.now.sh if your Next.js app is not the default path.

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

timneutkens picture timneutkens  路  72Comments

poyiding picture poyiding  路  73Comments

timneutkens picture timneutkens  路  250Comments

matthewmueller picture matthewmueller  路  102Comments

Timer picture Timer  路  60Comments