Using a single catch-all route for CMS pages

[JonCognioDigital]

Hi all,

I've built a couple of Next sites in the past, always using SSR with a my CMS and always defining all routes in the pages directory because all pages were known at build time they just needed to fetch their content.

Now that we have catch-all routes and SSG I'm trying to work out how it all fits together, which leads to a few questions....

1. Is it a valid strategy to allow CMS users to create any number of pages with nested slugs (e.g. domain.com/funny/cats/photos) and use a single catch-all route in Next JS to go to the CMS and get the content by slug and render it. Has anybody had success doing this?

I'm assuming that I can place any known routes which don't behave this way like the search/results in the pages directory and they'll behave differently, the catch-all just catches anything else?

2. Because the CMS might have hundreds of pages and they are not known at build time, can I use an empty "getStaticPaths" with fallback:true. As I understand it the user will see a loading indicator at first then it will be repalced by the content?

3. If that is the case then how does that work with SEO. Do we have to assume that Googlebot isn't the first visitor after a new page is created otherwise it'll just get a loading indicator served by the server?

4. How long are pages cached when using fallback:true and for how long? If we assume that the content editor always views the page at least once after creating it can we always assume that if Googlebot comes along later it will get a full page not a loading indicator?

5. Lastly, what about 404s and 301s? Assuming we use the catch-all routes then the browser will always get a 200 response while it tries to load the content presumably, if the content isn't in the CMS or it has moved then it should have got a 404 or 301 as the server response?

Sorry for all the questions but I've been reading the docs for nearly 24 hours trying to work out a strategy. If I can't get it all working then I could revert to just a normal SSR app but that would be a shame given all the progress on SSG by the Next JS team.

Many Thanks.

[balazsorban44]

Hi, let me try answering:

1. We are doing the same at work, (have a single [...slug].js, and search etc in pages), works fine.
2. Yes, you can return an empty array in getStaticPaths with fallback: true. If you have some very high traffic pages that you DO know at build time, I guess they can be returned here anyway, so even the initial fallback screen is not shown for those, keeping high traffic pages always available, even for the first users.
3. As pointed out by @Timer here, from the perspective of a Googlebot, it is no problem, it won't affect SEO
4. Again, Googlebot will manage to bypass the loading indicator, and it is you who decides how long the cache should live with the revalidate property returned in getStaticPaths. Look at the docs for an explanation.
5. If getStaticPaths fails to load the data from the CMS (or fails for any reason), an error is thrown, which will redirect the user to the 404 page automatically.