Combining Static Sites + Client Side Rendering (React, Gatsby)
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
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
- Now install gatsby-plugin-create-client-paths:
npm install --save gatsby-plugin-create-client-paths
- Configure it by adding it to
gatsby-config.js
like so:
plugins: [
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [`/app/*`] },
},
...
- This will result in everything within
/app
to only be rendered in the browser (ie client-side). - Go to your browser after building (
gatsby develop
) and check/app
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM