SSR

  1. A React component - even just a basic one that renders “Hello World” for now.

 

  1. A server which spits back our basic React component after it’s wrapped it in some HTML structure.

 

  1. A React app which is going to pick up from where the server rendered HTML left off and add in any event listeners to the existing markup where needed.

It’s important to note here that, for React’s sake, what you render on the server (#2 above) needs to be identical to what is rendered on the client (#3). If not, React will throw a warning.

.render

.hydrate

Pass props to components

Render App with fetched data

Add routing

Add redux

Alternatives

Next.js

 

https://nextjs.org/

Gatsby

 

https://www.gatsbyjs.org/docs/ssr-apis/

What is unit testing?

  1. Break down the project into small pieces
  2. Test them independently

Good unit-test:
- Repeatable
- Atomic
- Fast
- Isolated / Independent
- Descriptive
- well structured

Installation

npm install -D jest

npm install -D enzyme enzyme-adapter-react-16 enzyme-to-json

npm install -D redux-mock-store

Tesing

shallow, mount, render

mocks

simulate

Useful links

https://github.com/redux-saga/redux-saga

https://facebook.github.io/immutable-js/

https://github.com/reduxjs/reselect

https://github.com/acdlite/recompose

https://github.com/yuliaHope/ssr-test-example

https://newsapi.org/

Made with Slides.com