Research & Implement Server side rendering or Static site generation

[mateoclarke]

This project is starting as a create-react-app (CRA) because it is the most popular starter for React projects. It includes basic linting around accessibility and a good webpack config. But mainly, it lets us start working on a prototype without many premade opinionated decisions.

But it does lack SEO and accessibility support (a11y) when Javascript is disabled on a browser or with some screen readers. The solution for this is server-side rendering (SSR).

We haven chosen to do CRA then SSR because it will be faster and it is recommended. CRA will look great for demos and user testing. And the components will be reused in a server rendered, accessible framework before public launch.

This task is for researching that path from CRA to SSR using Next.js.

Can we start by using nextjs router?
https://github.com/fridays/next-routes

• Think about data usage in general and how SSR is a pro or con.
• Why does SSR matter?

Resident Value

Supporting equity in our community by ensuring that our community with limited data access on mobile devices causes the least amount of drain on their plan by rendering server side.

[ifsimicoded]

We should think about using named routes so we can reference urls via names instead of paths in case urls have to change in the future, we can make this change in one place, rather than over many files.
In accordance, let's investigate how routers are implemented by server side rendering libraries.

[mateoclarke]

One clear differentiator that has become clear between Next.js and Gatsby is the Routing library they each use. In our create-react-app prototype, we've been using React Router 4. It has features like NavLinks and basename that we'd like to use. See #102

Next.js uses it's own routing library. This would require some refactoring for us. There is discussion around how to integrate React Router 4 with Next.js, but it doesn't seem very clear to me the best way to implement. vercel/next.js#1632

Gatsby uses its own routing library but its basically just a wrapper around React Router 4. https://www.gatsbyjs.org/packages/gatsby-link/

This issue of router libraries is making me lean towards Gatsby in our first implementation of a sever-side/static build tooling process.

[mateoclarke]

Now also considering this new project called React Static: https://medium.com/@tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc

[mateoclarke]

Closed with #119