React is great, but there are negative implications with regards to SEO (Search Engine Optimization) as well as with so many programming patterns, especially when it comes to page based applications. Gatsby and next.js are 2 frameworks that address both concerns
- Server-Side Rendering and SEO
- The Gatsby Ecosystem
- The Next.js Ecosystem
- Build a simple Blog site with Gatsby
- Build a simple Blog site with Next.js
- Tackle new Javascript Frameworks
-
Install Gatsby CLI
npm install -g gatsby-cli
-
Start a new app, from a starter
gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
-
Change directories into site folder
cd gatsby-site
-
Start development server
gatsby develop
If you're using a blog/content starter, Gatsby uses Markdown to structure the content (MDX), and turns that into React Components
https://www.gatsbyjs.com/docs/mdx/
-
Create a new app, from their example
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
-
Change directories into site folder
cd nextjs-blog
-
Start development server
npm run dev
Next.JS uses the page metaphor to create websites. Each "Page" of your app or website lives in the pages
folder, where it has it's own state, lifecycle.
You can use Redux or any other global state manager at the top level, and you can provide common header/footer or page wrapper components to normalize your site as you please.
Next also allows/encourages you to build esoteric API Routes for use in your application to help you serve your own data quickly within the app.