Skip to content
This repository has been archived by the owner on May 10, 2021. It is now read-only.

Add support for getStaticProps and getServerSideProps #7

Closed
laugharn opened this issue Apr 29, 2020 · 6 comments
Closed

Add support for getStaticProps and getServerSideProps #7

laugharn opened this issue Apr 29, 2020 · 6 comments

Comments

@laugharn
Copy link

Feature request

Full support for the Next 9.3 getStaticProps/getServerSideProps page functions

Is your feature request related to a problem? Please describe.

I recently started deploying a site using next-on-netlify (thank you so much for this plugin, you have saved my team a ton of heartache) and would like to take advantage of getStaticProps, so we can statically generate some content from our CMS at build time.

image

As you can see above, the resources aren't getting generated for the new page types. The pages still load, and has the data generated with SSR, but it's generating the page on demand and not statically at build.

Describe the solution you'd like

Generate pages with getStaticProps as static. Would be happy to help, but am not sure where to start looking.

Describe alternatives you've considered

Accept the outcome but remove the 404 errors by using getInitialProps instead
@FinnWoelm
Copy link
Collaborator

Hey @laugharn,

Thank you for taking the time to file an issue!

I'm going to look into this in the coming days. I had a busy week, so I haven't been able to do so just yet. I'll get back to you soon — hopefully with some insights 😁

PS: I'm going to tag #1 and @Yagogc who had a related issue, I think:

I'm having issues with next-on-netlify by getting query params from getServerSideProps.

We didn't find a solution in that thread, I'm just tagging it for future reference.

@FinnWoelm FinnWoelm mentioned this issue May 24, 2020
Closed
FinnWoelm added a commit that referenced this issue Jun 1, 2020
@FinnWoelm
Add support for statically routed SSG pages
89295e8 
Copy pre-rendered pages with SSG to Netlify publish directory and
copy SSG page JSON data to _next/data/ directory.

See: #7
FinnWoelm added a commit that referenced this issue Jun 1, 2020
@FinnWoelm
Add support for dynamically routed SSG pages without fallback
6a6c7ed 
Copy pre-rendered, dynamically routed pages with SSG to Netlify publish
directory and copy SSG page JSON data to _next/data/ directory.
Makes sure that the page source is not treated as an SSR page.
Otherwise, a Netlify Function would be created and they page would have
a (server-side-rendered) fallback.

See: #7
FinnWoelm added a commit that referenced this issue Jun 1, 2020
@FinnWoelm
Add support for dynamically routed SSG pages with fallback
81026fb 
Copy pre-rendered, dynamically routed pages with SSG to Netlify publish
directory and copy SSG page JSON data to _next/data/ directory.

Create a Netlify Function to handle the paths not defined in the page's
getStaticPaths. When requesting a page that has not been pre-rendered,
it will be SSRed by this function. The function also returns the page
data for paths that have not been pre-defined.

See: #7
FinnWoelm added a commit that referenced this issue Jun 1, 2020
@FinnWoelm
Add support for SSR pages using getServerSideProps
31b0f09 
For pages that use getServerSideProps, we create a Netlify Function
just like we do for pages with getInitialProps. In addition, we also
add an extra redirect that allows getting the page props as JSON.
This is when navigating to the page on the client-side.

See: #7
@FinnWoelm
Copy link
Collaborator

Hey @laugharn,

Happy to report that next-on-netlify will very soon support getStaticProps and getServerSideProps!

The code is already committed to the wip-version2 branch. Feel free to check it out! If you do, make sure to have a look at the changes you need to make to your Netlify configuration. Implementation details for GSP and GSSP are below (for reference).

I'm hoping to merge it into master later today and finally publish next-on-netlify v2 🎉 🤞

Cheers,
Finn

Reference:

For pages with getStaticProps, it supports:

  • pages with static routing:
    • the page will be pre-rendered
    • when requesting the page, it will be delivered by CDN
    • when navigating to the page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by CDN
  • pages with dynamic routing and pre-defined paths in getStaticPaths and fallback: false
    • the pages for the defined paths will be pre-rendered
    • when requesting one of those page, it will be delivered by CDN
    • when navigating to one of those page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by CDN
    • when requesting a path that was not pre-defined in getStaticPaths, you get a 404
  • pages with dynamic routing and pre-defined paths in getStaticPaths and fallback: true
    • the pages for the defined paths will be pre-rendered
    • when requesting one of those page, it will be delivered by CDN
    • when navigating to one of those page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by CDN
    • when requesting a path that was not pre-defined in getStaticPaths, the page is SSR-ed. This is different from NextJS, where the page is not SSR-ed. On NextJS, a fallback version of the page is shown on first request. Then the data is loaded on the client. At the same time, NextJS also makes that page's rendered HTML available via CDN for future requests. We cannot do that with Netlify, because we cannot upload assets to the CDN at run-time. So I'm diverging a bit from NextJS here and just SSR-ing all non-defined paths.
    • when navigating to a non-pre-defined path on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by a Netlify Function (the same function that takes care of SSRing the page)

For pages with getServerSideProps with static or dynamic routing:

  • when requesting a page, it is always SSR'ed
  • when navigating to a page on the client-side (using Next <Link>), the page's JSON data will be fetched and delivered by a Netlify Function (the same function that takes care of SSRing the page)

@laugharn
Copy link
Author

laugharn commented Jun 1, 2020

image

Working great on our test builds. Cannot thank you enough for this one!

FinnWoelm added a commit that referenced this issue Jun 2, 2020
@FinnWoelm
Publish v2.0.0
9bf3e9f 
- **Breaking: You must change your `netlify.toml` configuration for
  next-on-netlify v2.0.0.** Please look at the README for the latest
  configuration.
  `next-on-netlify` now builds pre-rendered pages and static assets in
  `out_publish`. Netlify Functions for SSR pages are built to
  `out_functions`.
- Add support for `getStaticProps` (#7)
- Add support for `getStaticPaths` with and without fallback (#7)
- Add support for `getServerSideProps` (#7)
- Query string parameters are now correctly passed to Next Pages and API
  endpoints (#9)
- Response headers are now correctly set (#9)
- When a user encounters a 404, `next-on-netlify` now display the NextJS
  404 page rather than Netlify's default 404 page. You can customize the
  NextJS 404 page. (#2)
- Every page with server-side rendering is now converted to a
  stand-alone Netlify Function. Previously, all SSR pages were bundled
  in a single Netlify Function.
- `next-on-netlify` now prints out which pages are being converted to
  Netlify Functions for SSR, which pages are served as pre-rendered
  HTML, and the redirects that are being generated.
- Adding custom redirects via a `_redirects` file in the project root is
  no longer supported. Let me know if you want this back. Or define your
  redirects in `netlify.toml`.
@FinnWoelm
Copy link
Collaborator

Hey @laugharn,

Thank you for testing! 😁

next-on-netlify v2 is finally out 🎉 🎉 You can see the full list of changes in the changelog.

Thank you for your support and beta testing! Don't forget to switch back to next-on-netlify in your package.json :)

Let me know if you run into any trouble. And if you end up building something awesome, let me know, too! I'd love to feature some real-world projects in the README.

Happy hacking! 🔥
Finn

@FinnWoelm FinnWoelm changed the title Support GS(S)P Add support for getStaticProps and getServerSideProps Jun 2, 2020
@FinnWoelm
Copy link
Collaborator

PS: I'm going to close this issue for now. But feel free to reopen any time or file a new issue, when something new comes up!! :)

@wpmonty
Copy link

wpmonty commented Nov 13, 2020

we cannot upload assets to the CDN at run-time

Are there any plans to change the Fallback behavior and cache the results of SSR?

@Jonzy3000 Jonzy3000 mentioned this issue Apr 3, 2021
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@laugharn @FinnWoelm @wpmonty