Combining Static Sites + Client Side Rendering (React, Gatsby)

Question

I want to build a web app with React.

When users visit the site, they will see a Landing Page , can go to a Pricing Page , an About page , a Blog . etc. They can also Sign Up or Log in and then there's the actual app. I would like render certain pages ( Landing,Pricing,About,Blog ) statically , but would like to leave everything behind the SignUp/Login-Wall client-side rendered .

(First, because it cannot be static, since this is dynamic content. And also, because I do not care about SEO here anyways, so a major reason for next.js falls away, since the app is behind a SignUp/Login Wall anyways.)

Questions: First of all: Does this make sense? And secondly: How could I implement something like this? I haven't found anything online? Is this unheard of I would like to use Gatsby.js for my static content, but I am not sure how to bring the client-side-rendered bit into the mix. I have worked with create-react-app before, which does client-side-rendering, - but I am not sure how I would go about the implementation?

Answer 1

I will try to explain the process behind jamstack-hackathon-starter (which @ksav commented).

It is a starter template for gatsby that allows you to save static pages in-
conjunction with dynamic pages (client-side react app) - a "Hybrid Gatbsy App".

Manual Steps:
1. Create a folder src/app which will contain your client-side react app.
2. Create a file in src/pages called app.js , with the following contents:

 // I'm using create-react-app's structure import App from '../app/src/App' // make sure this path corresponds to your path export default App

3. Now install gatsby-plugin-create-client-paths :
   npm install --save gatsby-plugin-create-client-paths
4. Configure it by adding it to gatsby-config.js like so:

 plugins: [ { resolve: `gatsby-plugin-create-client-paths`, options: { prefixes: [`/app/*`] }, },...

5. This will result in everything within /app to only be rendered in the browser (ie client-side).
6. Go to your browser after building ( gatsby develop ) and check /app

Answer 2

According to npmjs The plugin gatsby-plugin-create-client-paths is deprecated.

https://www.npmjs.com/package/gatsby-plugin-create-client-paths

This plugin's functionality is now built-in to Gatsby. Use the File System Route API: https://gatsby.dev/creating-client-only-routes . This package will no longer receive updates.