 | Next.js Quick Start Guide: Server-side rendering done right Kirill Konshin |
Created by Ahmed Mansour Ouda – Last synced March 10, 2019
 To decrease code duplication, we would like to use the same technology and the same templates both on the client and on the server. Such an app is called universal or isomorphicFebruary 23, 2019 |
 it’s impossible to generate purely dynamic routes on a serverFebruary 23, 2019 |
 We save Next.js to devDependencies to clearly separate dependencies for the client and for the server. Server-side dependencies will be in the devDependencies section; the client’s will be in the regular sectionFebruary 23, 2019 |
| So, what if we’d like to apply styles to the link? We should apply them not on but on the component – separation of concerns at its finest February 23, 2019 |
| const Bundle = dynamic({ // you can add or remove components based on props modules: props => ({ Foo: import(‘../components/Foo’), Bar: import(‘../components/Bar’) }), render: (props, {Foo, Bar}) => ({props.title}) }); export default () => ( ); February 25, 2019 |
| If you don’t use any data management frameworks, then your best bet is to request data when the component will mount, February 26, 2019 |
| This will initiate the data loading process when the component is about to be mounted. Before the data is made available, it will show a loading indicator. February 26, 2019 |
| the FLUX ideology February 29, 2019 |
| that should not even be aware of such things. As you can see in this example, IntermediateComponent has to pass the data and loader to LoggedUserAvatar , but it does not use it, so this is unnecessary knowledge. This will further lead to more and more edits if we need to update a leaf component or a top-level component. February 29, 2019 |
| Redux consists of a store that has the main app state, a set of connected components that listen to changes in that state, a number of actions (objects that describe a change), and reducers (functions that mutate the state according to an action). February 29, 2019 |
| We will use Higher Order Components ( HOC ) to wrap the Next.js wrapper. For the record, HOC is a function that accepts a Component and returns a wrapped version of it, which is also a Component . Sometimes, an HOC can accept arguments and return another function, which in turn will take a Component as an argument. March 02, 2019 |