# CSR & SSR Explained
This document explains the differences between CSR and SSR,
between interactive and non-interactive,
and between static and dynamic.
> :information_source: You can use Goldpage without reading this document; we recommend that you write your app first and learn about CSR and SSR later.
> :information_source:
> If you already know what CSR and SSR are then checkout
> [Client-side Rendering (CSR) VS Server-side Rendering (SSR)](/docs/csr-vs-ssr.md#readme)
> instead.
> :warning:
> This document requires you to have a [good understanding of the DOM](/docs/dom.md#readme).
#### Contents
- [What are CSR and SSR?](#what-are-csr-and-ssr)
- [Interactive vs Non-interactive](#interactive-vs-non-interactive)
- [Static vs Dynamic](#static-vs-dynamic)
- [Crawlability](#crawlability)
- [Performance](#performance)
- [CSR + SSR](#csr--ssr)
# What are CSR and SSR?
Modern view libraries (React/Vue/...) are able to run in the browser as well as in Node.js.
In the browser your page is rendered to the browser's DOM,
and in Node.js your pages is rendered to HTML.
When you define a page with React (or Vue),
you have the choice between rendering your page to the DOM or to HTML.
> :information_source:
> We will only talk about React from now on,
> but everything here is applicable to any modern view library such as Vue or Angular.
*Server-Side Rendering* (SSR) denotes the practice of rendering a page to HTML on the server.
And *Client-Side Rendering* (CSR) denotes the practice of loading a page in the browser and rendering it to the browser's DOM.
SSR example:
~~~js
// This example uses Goldpage to create a SSR page.
import React from 'react';
export default {
route: '/ssr-example',
view: SomeText,
// We do SSR: we render the page to HTML.
renderToHtml: true,
// We do SSR only: we don't render the page to the DOM.
// (We could also do both SSR *and* CSR
// which we explain later.)
renderToDom: false,
};
function SomeText() {
return (
Some Content
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
);
};
~~~
This page is server-side rendered:
the page is rendered to HTML.
Note that this page
has no `