Migration of NextXP from getServerSideProps to getStaticProps

Help
1

Enonic version: 7.12.2
OS: MAC and WINDOWS

As the Next.XP is released now I started to migrate my work from template-version 0.9 to version 1.0.2 !
As the approach changed to static props i need a new SEO-friendly solution for my pages using pagination.

These pages have the following signature:
`${site}/[_path]?page=[page]

I use a query connection to fetch the data (I calculate the offset from the page) :

query ($query: String!, $type: String!, $sort: String, $offset: String, $first: Int) {
  guillotine {
    queryConnection(...) {..}
   }
}

How can I deal with this?

  • Make changes to getStaticPaths in [[...contentPath]].tsx
  • return to Server Side Props
  • …

How would you solve this ?

2

Hi @luctho !

As you correctly noticed, we now use static page generation instead of server side rendering to speed up page rendering in production.

That approach comes with a few limitations worth mentioning:

  • pages are now rendered during build-time and served in run-time
  • therefore page requests do not contain parameters in run-time
  • we keep track of query parameters and consider a page with different set of query parameters as a different page

So based on the above I would suggest you the following:

  • If you know all the possible query params during build-time (i.e. page=1,2,3,4…10), then you can update the getStaticPaths to return paths with all possible params variants to generate static pages
  • If you don’t know all the possible query params during build-time (i.e query=), then you will have to convert that page to the getServerSideProps.

NOTE: you don’t have to convert all the pages to server side rendering, you can have both modes working together in separate pages (more here):

  • search.tsx – having getServerSideProps and catching only /search requests
  • [[…contentPath]].tsx – having getStaticProps and catching all other requests
1 Like
3

I assume this is just a placeholder - right?
The template contains the page _renderable.tsx using getServerSideProps.

Can I use this as blueprint ?

I think the first approach

will not work with query-params , even if I know or can calculate all of them !
As I know this only works with path-params like ${site}/_path/[page]

4

Yes, you can use _renderable.tsx as a blueprint.

You’re right about params, I confused static build with preview mode here.
So adding params to getStaticPaths will not change static pages, but it makes a difference in the preview mode.

So your best bet is a separate file with getServerSideProps here !

2 Likes