{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/server-side-rendering-react-hydration-best-practices/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"684d3537-a45d-5941-9ea0-2c0ab9edb270","timeToRead":8,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Keeping Server-Side Rendering Cool With React Hydration\",\n  \"date\": \"2020-08-14T20:34:26.661Z\",\n  \"template\": \"post\",\n  \"slug\": \"server-side-rendering-react-hydration-best-practices\",\n  \"description\": \"The purpose of this article is to share some helpful things to keep in mind to render a seamless experience as a Server-Side Rendered (SSR) site transitions from a window-less (server) environment to a browser.\",\n  \"tags\": [\"React\", \"SSR\"],\n  \"featured\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Callout = makeShortcode(\"Callout\");\nvar TableOfContents = makeShortcode(\"TableOfContents\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Server-side rendering can be powerful but it does require thinking in multiple contexts so it's important to be familiar with some of the common gotchas when developing Server-Side Rendered websites. This article is a written version of a talk I gave at \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.reactrally.com/\"\n  }, \"React Rally\"), \" 2020, where I shared some helpful things to keep in mind to render a seamless experience as a Server-Side Rendered (SSR) site transitions from a window-less (server) environment to a browser.\"), mdx(Callout, {\n    mdxType: \"Callout\"\n  }, \"A version of \\\"Keeping Server-Side Rendering Cool With React Hydration\\\" is also available at \", \"\", mdx(\"a\", {\n    href: \"https://github.com/M0nica/react-ssr-hydration-talk\"\n  }, \"GitHub/m0nica/react-ssr-hydration-talk\"), \".\"), mdx(TableOfContents, {\n    headings: props.tableOfContents,\n    mdxType: \"TableOfContents\"\n  }), mdx(\"h2\", {\n    \"id\": \"what-is-server-side-rendering-ssr\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#what-is-server-side-rendering-ssr\",\n    \"aria-label\": \"what is server side rendering ssr permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"What is Server-Side Rendering (SSR)?\"), mdx(\"p\", null, \"Let's take a step back. First, what is server-side rendering? When a server generates the initial HTML that loads in a browser. Frameworks like \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://nextjs.org/\"\n  }, \"NextJS\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.com/\"\n  }, \"GatsbyJS\"), \" support SSR out of the box. Server Side Rendered applications tend to initially load content faster and lead to higher SEO ranking than their Client-Side Rendered counterparts.\"), mdx(\"p\", null, \"There are different types of server-side rendering for example server-side rendering can be used to render every single page request or only the initial page request. \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering\"\n  }, \"NextJS offers two forms of server-side rendering\"), \". You may be familiar with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/facebook/create-react-app\"\n  }, \"Create React App\"), \", a default React app boilerplate which does not come with SSR functionality configured out of the box.\"), mdx(\"h2\", {\n    \"id\": \"what-is-client-side-rendering-csr\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#what-is-client-side-rendering-csr\",\n    \"aria-label\": \"what is client side rendering csr permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"What is Client-Side Rendering (CSR)?\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/enable-javascript.png\",\n    \"alt\": \"Blank page in browser saying \\\"You need to enable JavaScript to run this app\\\"\"\n  })), mdx(\"p\", null, \"In contrast to Server-Side Rendering, a website that only supports Client-Side Rendering requires visitors to have JavaScript enabled to view content on the site. Often visitors will see a largely blank page when visiting a Client-Side rendered application if they do not have JavaScript enabled.\"), mdx(\"p\", null, \"If you look at the DOM in the developer tools of a Create React App (or client-side only rendered application) you'll notice very little HTML markup in the DOM. The markup might resemble something like the below code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<html>\\n  <head>\\n    <!-- SEO/Metadata here -->\\n  </head>\\n  <body>\\n    <div>You need to enable JavaScript to run this app.</div>\\n    <div id=\\\"root\\\"></div>\\n    <script>\\n      <!-- all of the JavaScript -->\\n    </script>\\n    <script src=\\\"/static/js/2.6158a3d8.chunk.js\\\"></script>\\n    <script src=\\\"/static/js/main.ba831a9f.chunk.js\\\"></script>\\n  </body>\\n</html>\\n\")), mdx(\"p\", null, \"Generally this markup will include the root where React is injected, a message saying you need to enable JavaScript to run the app as well as script tags that link to the JavaScript that needs to be loaded to hydrate the page.\"), mdx(\"h2\", {\n    \"id\": \"overview-of-ssr-in-static-context\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#overview-of-ssr-in-static-context\",\n    \"aria-label\": \"overview of ssr in static context permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Overview of SSR (in static context)\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/hydration-steps-with-link.png\",\n    \"alt\": \"step by step illustration walking through react hydration steps\"\n  })), mdx(\"p\", null, \"Let's walk through what happens in Server-Side Rendered applications like NextJS or Gatsby when all the pages for the site are statically generated at once in the server.\"), mdx(\"p\", null, \"First, you write the site in React \\u269B\\uFE0F then Gatsby or Next (Static Site Generation) creates a production build of your site using ReactDOMServer, a React server-side API to generate HTML from React. When someone visits your website the first thing they'll see is the HTML generated from the server. JavaScript then loads after the initial page load and the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/react-dom.html#hydrate\"\n  }, \"ReactDOM.hydrate() API\"), \" kicks in to hydrate the HTML page that was rendered from the server with JavaScript. After Hydration the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/reconciliation.html\"\n  }, \"React reconciler APIs\"), \" take over and the site becomes interactive.\"), mdx(\"h2\", {\n    \"id\": \"toggling-javascript-ssr-vs-csr\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#toggling-javascript-ssr-vs-csr\",\n    \"aria-label\": \"toggling javascript ssr vs csr permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Toggling JavaScript: SSR vs. CSR\"), mdx(\"p\", null, \"Let's compare how a Server-Side and Client-Side rendered applications appear when JavaScript is enabled or disabled. For these two examples, I used Gatsby and Create React App for these technologies.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/gatsby-toggle-javascript.gif\",\n    \"alt\": \"gif of enabling/disabling JavaScript on Gatsby site\"\n  })), mdx(\"p\", null, \"The above image is of a Gatsby site, where when JavaScript is toggled on/off there is very little visible change on the left aside from the image loading as most of the HTML was available without JavaScript.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/create-react-app-toggle-javascript.gif\",\n    \"alt\": \"gif of enabling/disabling JavaScript for site built with create-react-app\"\n  })), mdx(\"p\", null, \"In contrast, in the above image of a Create-React-App which uses client-side rendering and the browser is responsible for constructing the initial HTML. Due to this we just see the bare-bones HTML as opposed to a full HTML document when JavaScript is disabled.\"), mdx(\"h2\", {\n    \"id\": \"my-server-side-app-looks-great-in-developmentwhat-could-go-wrong-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#my-server-side-app-looks-great-in-developmentwhat-could-go-wrong-\",\n    \"aria-label\": \"my server side app looks great in developmentwhat could go wrong  permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"My server-side app looks great in development...What could go wrong? \\uD83D\\uDE05\"), mdx(\"p\", null, \"We just looked at an example of Server-Side rendering that looked great in production both with or without JavaScript! What could go wrong? There are some common issues you might run into with Server-Side rendered applications that only occur during the initial hydration process in production such as layout shifts or errors that only appear at build-time.\"), mdx(\"h3\", {\n    \"id\": \"1-missing-data-on-server-side\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#1-missing-data-on-server-side\",\n    \"aria-label\": \"1 missing data on server side permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"1. Missing Data on Server-Side\"), mdx(\"p\", null, \"Something helpful to keep in mind is that some data just is not available in the static server context like user or browser-specific data. For example, window size, authentication status, local storage, etc.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/target-nav.gif\",\n    \"alt\": \"screenshot of target.com navigation\"\n  })), mdx(\"p\", null, \"In the above image of Target's navigation, you'll see that the store location data, my name, and items in the shopping cart were not available on the initial page load. Once the data was available it hydrated on the page without shifting the layout. Loading patterns like this can be common on server-side rendered applications.\"), mdx(\"h3\", {\n    \"id\": \"2-unavailable-javascript\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#2-unavailable-javascript\",\n    \"aria-label\": \"2 unavailable javascript permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"2. Unavailable JavaScript\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/what-could-go-wrong.gif\",\n    \"alt\": \"screenshot of my site header loading with disjointed icons and shifting layout\"\n  })), mdx(\"p\", null, \"Let's debug the above hydration issue that caused my site to have multiple unnecessary rendering changes during load. Something huge that is not available on initial load and can cause issues in server-side rendered applications is JavaScript! It's considered a best practice to load CSS before JavaScript therefore you need to consider how the HTML and CSS on a page load BEFORE JavaScript is available since JavaScript is not required for the page to load.\"), mdx(\"p\", null, \"You may end up noticing weird changes on the initial page load that change too quickly to properly inspect - especially if you have a faster internet connection. But there are ways to slow down and really see what is going on. In particular, I'd recommend disabling JavaScript in your browser or using a site like \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.webpagetest.org/\"\n  }, \"web page test\"), \" to generate film strip thumbnails that show you exactly how the page is loading step by step.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/font-awesome-rendering-issue.png\",\n    \"alt\": \"filmstrips of my site loading with rendering issue\"\n  })), mdx(\"p\", null, \"Above is the waterfall I took of the issue on my site before it was resolved. You can see one of the issues is that the size of the FontAwesome icons changes drastically between 96% and 99% loaded which can be a disjointing experience.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/jsstocss.png\",\n    \"alt\": \"crossed out JavaScript icon transitioning to CSS\"\n  })), mdx(\"p\", null, \"The solution for getting rid of the resizing of the icons during load involved replicating the final styling with local CSS and removing any dependency on FontAwesome's external CSS which required JavaScript to be available.\"), mdx(\"p\", null, \"I disabled JavaScript which allowed me to see in development that the ways the icons look before they were fully loaded mirrored the app without JavaScript. This led me to realize Font Awesome was using its own styling that was coming in through JS that conflicted with my local CSS style. Since CSS loads before JS, disabling Font Awesome's external CSS (loaded via JavaScript) and replicating the CSS styles I wanted locally resolved the issue\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/after-fixing-fontawesome-issue.png\",\n    \"alt\": \"film strip of my site loading without layout  shifts\"\n  })), mdx(\"p\", null, \"You'll notice after (above image) removing the dependency on Font Awesome's CSS that the styling of the icons remains consistent as the application loads.\"), mdx(Callout, {\n    mdxType: \"Callout\"\n  }, mdx(\"a\", {\n    href: \"/blog/less-javascript-is-more/\"\n  }, \"I wrote an article\"), \" with more information about my experience resolving the Font Awesome rendering issues.\"), mdx(\"h3\", {\n    \"id\": \"3-immutable-layout\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#3-immutable-layout\",\n    \"aria-label\": \"3 immutable layout permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"3. Immutable Layout\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/shifting-items.gif#center\",\n    \"alt\": \"gif of colorful shifting blocks\"\n  })), mdx(\"p\", null, \"The previous issue of changing styles is related to a much larger issue of handling layouts on the server-side. Generally, you should avoid unnecessary layout shifts during page load by implementing layouts with placeholder/gap for expected client-side content and avoiding using JavaScript to position or style content instead of CSS. It is common for some data to be unavailable as the page loads, however, you can develop in a way that can handle missing data by leaving room in the UI for the data to load. In the Target navigation example you can see there is no shift as the user/store specific data is loaded.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/target-nav.gif\",\n    \"alt\": \"screenshot of target navigation\"\n  })), mdx(\"h3\", {\n    \"id\": \"4-strange-conditional-rendering-in-server-context\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#4-strange-conditional-rendering-in-server-context\",\n    \"aria-label\": \"4 strange conditional rendering in server context permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"4. Strange Conditional Rendering in Server Context\"), mdx(\"p\", null, \"If you write React you may have conditionally rendered content like the below code snippet based on screen size using the MatchMedia API. However, this approach might lead to some unnecessary frustration...\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"if (small) {\\n  return <MobileApp />\\n} else {\\n  return <DesktopApp />\\n}\\n\")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"matchMedia()\"), \" API can't reliably detect the browser or device size in the server context which can lead to some strange rendering issues as the page loads if the originally set media size doesn't match the actual browser.\"), mdx(\"p\", null, \"It's preferable to use CSS or a library like fresnel which wraps all \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Media\"), \" components in CSS instead of MatchMedia in Server-Side rendered applications to layout content. Since CSS loads before JS, styles applied via CSS, unlike JavaScript should visibly match what you expect on page load.\"), mdx(\"p\", null, \"Below is an example of how Fresnel can be used. First, you need to import createMedia from Fresnel then define the breakpoints and export MediaContextProvider from the object created from createMedia to wrap the entire app. Then you can use Fresnel's Media component throughout your app to render components based on the predefined breakpoints.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import React from \\\"react\\\"\\nimport ReactDOM from \\\"react-dom\\\"\\nimport { createMedia } from \\\"@artsy/fresnel\\\"\\n\\nconst { MediaContextProvider, Media } = createMedia({\\n  breakpoints: {\\n    sm: 0,\\n    md: 768,\\n  },\\n})\\n\\nconst App = () => (\\n  <MediaContextProvider>\\n    <Media at=\\\"sm\\\">\\n      <MobileApp />\\n    </Media>\\n    <Media greaterThan=\\\"sm\\\">\\n      <DesktopApp />\\n    </Media>\\n  </MediaContextProvider>\\n)\\n\\nReactDOM.render(<App />, document.getElementById(\\\"react\\\"))\\n\")), mdx(\"p\", null, \"The final step is inject the CSS in the server by passing mediaStyle into a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<style>\"), \" tag in the head of the document so that CSS can be generated from fresnel markup and be rendered on the server. You can read more about setting up Fresnel for SSR in the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/artsy/fresnel#server-side-rendering-ssr-usage\"\n  }, \"Fresnel docs\"), \".\"), mdx(\"h3\", {\n    \"id\": \"5-error-window-is-undefined\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#5-error-window-is-undefined\",\n    \"aria-label\": \"5 error window is undefined permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"5. Error: Window is undefined\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/missing.gif#center\",\n    \"alt\": \"gif homer simpson looking under couch cushions looking for something\"\n  })), mdx(\"p\", null, \"If you attempt to access browser-specific elements in a server context JavaScript will not be able to resolve those elements.\"), mdx(\"p\", null, \"When building a site you might run into the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"window is undefined\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"document is undefined\"), \" error. This happens when logic within an app assumes the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"browser\"), \" window is defined in a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"server\"), \" and reference browser-specific elements in the server.\"), mdx(\"p\", null, \"Your first inclination to resolve the undefined Window error might be to write something like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"typeof window !== undefined ? //render component : // return null\\n\")), mdx(\"p\", null, \"However, if your app is using the ReactDOM.hydrate API to transform the site from HTML to the virtual DOM you need to be aware of ReactDOM.hydrate's constraint. ReactDOM.hydrate():\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83D\\uDC6F\\u200D\\u2642\\uFE0F expects that the rendered content is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"identical\"), \" between the server and the client.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\uD83D\\uDE45\\uD83C\\uDFFE\\u200D\\u2640\\uFE0F does not guarantee that attribute differences will be patched up in case of mismatches.\"))), mdx(\"p\", null, \"The Hydrate API that converts HTML to full-fledged React \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"expects that the content is always identical between the server and client\"), \" and does not guarantee that matches will be patched up in case of mismatches. Due to this lack of guarantee, it is NOT a good idea to conditionally render based on elements that will differ between the server and client.\"), mdx(Callout, {\n    mdxType: \"Callout\"\n  }, \" \", \"Check out \", mdx(\"a\", {\n    href: \"https://joshwcomeau.com/react/the-perils-of-rehydration/\"\n  }, \"this article\"), \" by Josh W Comeau for examples of visual discrepancies that can occur when React.Hydrate() fails to reconcile an unexpected difference.\", \" \"), mdx(\"p\", null, \"Safely accessing browser elements enables you to\\navoid reconciliation errors when ReactDOM.hydrates a site from HTML to React. In order to avoid issues with the hydration reconciliation process, you can wrap any side effects that rely on the Window or Document in a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/hooks-effect.html\"\n  }, \"useEffect\"), \" hook since that only fires after the component has mounted.\"), mdx(\"p\", null, \"useEffect() Example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"function Example() {\\n  const [count, setCount] = state(0)\\n  useEffect(() => {\\n    document.title = `You clicked ${count} times`\\n  })\\n}\\n\")), mdx(\"p\", null, \"This is an example from the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/docs/hooks-effect.html\"\n  }, \"React Docs\"), \" of referencing a browser element, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"document.title\"), \" within \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useEffect()\"), \". This code will never be executed on the server as it executes after the React Virtual DOM is available and therefore avoids running into issues with React.Hydrate().\"), mdx(\"h2\", {\n    \"id\": \"rule-of-least-power\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#rule-of-least-power\",\n    \"aria-label\": \"rule of least power permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Rule of Least Power\"), mdx(\"p\", null, \"With JavaScript comes great responsibility, sometimes JavaScript just isn't the right tool for the job:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\\"JavaScript is a powerful language that can do some incredible things, but it\\u2019s incredibly easy to jump to using it too early in development when you could be using HTML and CSS instead. Consider \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"the rule of least power\"), \": Don\\u2019t use the more powerful language (JavaScript) until you\\u2019ve exhausted the capabilities of less powerful languages (HTML).\\\" - Iain Bean, Your blog doesn\\u2019t need a JavaScript framework\")), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/ssr-hydration/art-direction.gif\",\n    \"alt\": \"image of my site header dynamically changing headshot images based on the screen size\"\n  })), mdx(\"p\", null, \"I recently used the rule of least power to speed up the initial load time of my header and eliminate relying on JavaScript to dynamically load different headers images on my site based on screen size.\"), mdx(\"p\", null, \"I was looking into how to display different images based on screen size and stumbled up HTML art direction which can be used to dynamically load images based on the screen size using HTML \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"srcset\"), \" attributes instead of JavaScript. Swapping images at different screen sizes can be done with JavaScript or CSS instead of native HTML attributes however using HTML can improve page loading performance as it prevents unnecessarily preloading two images.\"), mdx(\"p\", null, \"The cool thing about the HTML approach is that it can improve page loading performance as it allows the browser to only preload the image that is visible within the viewport. This can be especially beneficial if you need to display multiple images at various places within a site depending on the screen size.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<picture>\\n  <source media=\\\"(min-width: 625px)\\\" srcset=\\\"animonica-full.png\\\" />\\n\\n  <source srcset=\\\"animonica-headshot-cropped.png\\\" />\\n\\n  <img src=\\\"animonica-full.png\\\" alt=\\\"Illustrated Monica\\\" />\\n</picture>\\n\")), mdx(\"p\", null, \"In order to set up this functionality in HTML you can use the picture attribute and set media queries on each source image. It will return the first condition the is true and as a fall back it'll return the image from the img tag.\"), mdx(Callout, {\n    mdxType: \"Callout\"\n  }, \"It's also possible to use the art-direction API in Gatsby with gatsby-image which is Gatsby's package for loading and transforming images from GraphQL. I wrote\", \" \", mdx(\"a\", {\n    href: \"/blog/2020-06-24-exploring-art-direction-in-gatsby/\"\n  }, \"an article\"), \" \", \"with more information about my epxloration into using art direction with Gatsby.\"), mdx(\"h2\", {\n    \"id\": \"summary\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#summary\",\n    \"aria-label\": \"summary permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Summary\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In a Server-Side Rendered context it's important to consider \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"how\"), \" the page loads both when data is and is not available.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"CSS is the right tool for handling layout, especially in a Server-Side Rendered Application. Using JavaScript for styling in SSR apps can lead to strange loading experiences for some users.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It's important to guard references to browser-specific elements like \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"document\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"window\"), \" within \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"useEffect()\"), \" to avoid reconciliation error as the page hydrates to transform SSR apps from HTML to React.\")), mdx(\"h3\", {\n    \"id\": \"resources--further-reading\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#resources--further-reading\",\n    \"aria-label\": \"resources  further reading permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Resources & Further Reading\"), mdx(\"p\", null, \"Below are some resources I recommend if you're looking to further explore the rendering process for server-side rendered React applications.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://nextjs.org/docs/basic-features/pages#server-side-rendering\"\n  }, \"https://nextjs.org/docs/basic-features/pages#server-side-rendering\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://reactjs.org/docs/reconciliation.html\"\n  }, \"https://reactjs.org/docs/reconciliation.html\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.gatsbyjs.org/docs/react-hydration/\"\n  }, \"https://www.gatsbyjs.org/docs/react-hydration/\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://joshwcomeau.com/react/the-perils-of-rehydration/\"\n  }, \"https://joshwcomeau.com/react/the-perils-of-rehydration/\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.webpagetest.org/\"\n  }, \"https://www.webpagetest.org/\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/artsy/fresnel\"\n  }, \"https://github.com/artsy/fresnel\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.speedpatterns.com/patterns/immutable_layout.html\"\n  }, \"https://www.speedpatterns.com/patterns/immutable_layout.html\"))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#what-is-server-side-rendering-ssr","title":"What is Server-Side Rendering (SSR)?"},{"url":"#what-is-client-side-rendering-csr","title":"What is Client-Side Rendering (CSR)?"},{"url":"#overview-of-ssr-in-static-context","title":"Overview of SSR (in static context)"},{"url":"#toggling-javascript-ssr-vs-csr","title":"Toggling JavaScript: SSR vs. CSR"},{"url":"#my-server-side-app-looks-great-in-developmentwhat-could-go-wrong-","title":"My server-side app looks great in development...What could go wrong? 😅","items":[{"url":"#1-missing-data-on-server-side","title":"1. Missing Data on Server-Side"},{"url":"#2-unavailable-javascript","title":"2. Unavailable JavaScript"},{"url":"#3-immutable-layout","title":"3. Immutable Layout"},{"url":"#4-strange-conditional-rendering-in-server-context","title":"4. Strange Conditional Rendering in Server Context"},{"url":"#5-error-window-is-undefined","title":"5. Error: Window is undefined"}]},{"url":"#rule-of-least-power","title":"Rule of Least Power"},{"url":"#summary","title":"Summary","items":[{"url":"#resources--further-reading","title":"Resources & Further Reading"}]}]},"frontmatter":{"title":"Keeping Server-Side Rendering Cool With React Hydration","date":"August 14, 2020","description":"The purpose of this article is to share some helpful things to keep in mind to render a seamless experience as a Server-Side Rendered (SSR) site transitions from a window-less (server) environment to a browser.","tags":["React","SSR"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid.gy/post/twitter/indigitalcolor/1362593140385972224","wmProperty":"mention-of","wmId":1037382,"type":"entry","url":"https://twitter.com/CalligraphicDev/status/1362593140385972224","likeOf":null,"author":{"url":"https://twitter.com/CalligraphicDev","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1237fdd519f910c0d693d97f3d79971a3d568a8accbc0c1f3cc1d5ef2ab8b7e6.jpg","name":"Kevin Brown"},"published":"February 19, 2021","content":{"text":"Article that I learned a bunch of useful caveats on server-side rendering from:\naboutmonica.com/blog/server-si…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1297875513197965314","wmProperty":"mention-of","wmId":843257,"type":"entry","url":"https://twitter.com/alloy/status/1297875513197965314","likeOf":null,"author":{"url":"https://twitter.com/alloy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/34b24ae1818a04be49fac5c6a29f30522f6b841f4cc77245f0622e12c53a2b24.jpg","name":"Eloy Durán #BlackLivesMatter"},"published":"August 24, 2020","content":{"text":"Nice @ArtsyOpenSource Fresnel shoutout wrt server-side rendering responsive React powered layouts aboutmonica.com/blog/server-si…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1296757263483506688","wmProperty":"mention-of","wmId":842429,"type":"entry","url":"https://twitter.com/UKBlackTech/status/1296757263483506688","likeOf":null,"author":{"url":"https://twitter.com/UKBlackTech","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/52226b2ebfdec938ea031beea2d165707a9214109ddc0994471be778ef03d8ab.jpg","name":"UKBlackTech"},"published":"August 21, 2020","content":{"text":"Want to improve your experience when using SSR with React?\n\n@waterproofheart share some tips when dealing with SSR in this blog post\n\nRead about it here:\n\naboutmonica.com/blog/server-si…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1295805163026780160","wmProperty":"mention-of","wmId":841779,"type":"entry","url":"https://twitter.com/eggheadio/status/1295805163026780160","likeOf":null,"author":{"url":"https://twitter.com/eggheadio","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2f6afce0931a1c034fedc2b48aaeb2b8429fa20f8b982be3542aa6922b230dae.jpg","name":"egghead.io"},"published":"August 18, 2020","content":{"text":"Want to improve your experience when using SSR with React?\n\n@waterproofheart share some tips when dealing with SSR in this blog post\n\nRead about it here:\naboutmonica.com/blog/server-si…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1295699580391235585","wmProperty":"repost-of","wmId":841648,"type":"entry","url":"https://twitter.com/adrianh/status/1295699580391235585","likeOf":null,"author":{"url":"https://twitter.com/adrianh","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/965ac02580e6c6cce1b1055c90625712f2e4bf355470d9de3a3a018b1e8f49d9.jpg","name":"Adrian Howard"},"published":"August 18, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294694530118287368","wmProperty":"repost-of","wmId":841032,"type":"entry","url":"https://twitter.com/remotereact/status/1294694530118287368","likeOf":null,"author":{"url":"https://twitter.com/remotereact","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5c99b3d68f1d1cd638554487ddbe9fb921f87b185d3a4f6131a789caa152029e.png","name":"RemoteReact Rik"},"published":"August 15, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1593171","wmProperty":"like-of","wmId":841031,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1593171","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/threepointone","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/53f6c3e8edb25a34c4e31a9527a2756e9fd659fdb85ff5fdf78d24b54627ee6d.jpg","name":"Sunil Pai"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294681746940755968","wmProperty":"repost-of","wmId":841014,"type":"entry","url":"https://twitter.com/ReactJSLadies/status/1294681746940755968","likeOf":null,"author":{"url":"https://twitter.com/ReactJSLadies","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6a8940862e926c56b5af621413232297935e20fa6dbc18345679be5e0c3c43fe.jpg","name":"ReactLadies #NYC"},"published":"August 15, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1047615389067304960","wmProperty":"like-of","wmId":841013,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1047615389067304960","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/ReactJSLadies","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6a8940862e926c56b5af621413232297935e20fa6dbc18345679be5e0c3c43fe.jpg","name":"ReactLadies #NYC"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/14107299","wmProperty":"like-of","wmId":841012,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-14107299","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/jeremy646","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/eb290b9206eb0a1e9fa2c0ac5bd92daa86c9b0f6a04eaca3069df6f0c5244751.jpg","name":"Jeremy Lenz"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/467189912","wmProperty":"like-of","wmId":840996,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-467189912","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/ValentinHervieu","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/59a5a2556403bc13ab98f174c7ed1214bd2e48e6fe44f68e5ff314dd3644a3aa.jpg","name":"Valentin Hervieu"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/378570272","wmProperty":"like-of","wmId":840926,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-378570272","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/aks0095","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/52ba45667757c2ac104a24da31fe0082ace31a3b2e38ffea4abe29c7d2730fe0.jpg","name":"Amit Kumar"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1111007023041310725","wmProperty":"like-of","wmId":840882,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1111007023041310725","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/SylwiaVargas","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ae18bce151d7f50bebd22cf0f601d2cb7547f028a103b7227d1f5f275b9cfe1e.jpg","name":"sylwia vargas"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294389952697053185","wmProperty":"repost-of","wmId":840873,"type":"entry","url":"https://twitter.com/MedSadali/status/1294389952697053185","likeOf":null,"author":{"url":"https://twitter.com/MedSadali","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5cb8538d1f0c03e859eb934ccbe4ff66667b30531b0c478409f9487d50ecbee6.jpg","name":"Mohand 💻"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/111217362","wmProperty":"like-of","wmId":840872,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-111217362","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/bdougieYO","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c625cbd65947d883a4619af20f3935ced344a12bb40923a15eb36f7f1f420b58.jpg","name":"Brian Douglas on a staycation 🥦"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/974864883559706624","wmProperty":"like-of","wmId":840836,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-974864883559706624","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/ryands1701","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0ba439c6c7c4bd79f00f2c7502144fb33ffdd441ee8c0a9f4e85d4c5214689dc.png","name":"Ryan Dsouza"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/837424448085110784","wmProperty":"like-of","wmId":840812,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-837424448085110784","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/carolstran","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/7abe9ca520ae85167ee8cb9140e4206b44abc9aa40ebe177093c34122d6bb879.jpg","name":"Carolyn Stransky"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1259622945955016705","wmProperty":"like-of","wmId":840811,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1259622945955016705","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/tannerdolby","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0b9b6080c2486ab209b39facadec189a081288baa997cdb77bda07ddd9dafa21.jpg","name":"Tanner Dolby"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/4571321","wmProperty":"like-of","wmId":840810,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-4571321","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/gnb","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/670f49da73d874fd7238638b45e821abc8809132349de6fef36634f0e8f60b8b.jpg","name":"Graham Ballantyne"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/7810912","wmProperty":"like-of","wmId":840773,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-7810912","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/solomania","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/09c7cb0a909054236f67a726e0f79ee00cd22802e736eb5c9abdfd6aae6b1b32.jpg","name":"Mike Solomon"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/165198512","wmProperty":"like-of","wmId":840774,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-165198512","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/JoviMiliano","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3b0bf9c23c09c3b0bb9fa38d528129d70ffc4b1b1cbf5840af9ac6ff1812be43.jpg","name":"Giovanni Massimiliano"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1224745261504835584","wmProperty":"like-of","wmId":840772,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1224745261504835584","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/maggiecodes_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6fa3e77fb0b8ef037acc41f866b18cfb37b3a19f0ee42668048d46387d2fb0de.jpg","name":"maggie 👩🏽‍💻🌱"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/701640068893573120","wmProperty":"like-of","wmId":840771,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-701640068893573120","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/Mariah23A","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/addfbceb1bf1f87e646b5de004968f07f82a7abdf5566b40e2c82212a0b9b02f.jpg","name":"Mariah"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294328699664441345","wmProperty":"repost-of","wmId":840757,"type":"entry","url":"https://twitter.com/jcefidel/status/1294328699664441345","likeOf":null,"author":{"url":"https://twitter.com/jcefidel","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d026c137e8fe1c7ad8869878422fb5def879d2fa4646e15ac26702516989ff0a.jpg","name":"High Fidelity"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/961450041620779010","wmProperty":"like-of","wmId":840755,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-961450041620779010","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/katepapineni","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/637e6f6c5caa427852e07408cb4d8e50b021f5754ef1ac2d362eede83ac4416d.jpg","name":"Kate Papineni"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1025494621164630016","wmProperty":"like-of","wmId":840756,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1025494621164630016","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/studio_hungry","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8698bef3fc707cf8c8fd37f4bc0ae7bd8b6155eb9dc1b6e6b37f42789f247715.jpg","name":"Rich Haines"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/917069583097397248","wmProperty":"like-of","wmId":840753,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-917069583097397248","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/willjohnsonio","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/8b0ece85d7bdcd080b28373f900dab0880e0c2dd0127f134a57b6274a4281b30.jpg","name":"Ruby on Wills 🐺"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/209715720","wmProperty":"like-of","wmId":840754,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-209715720","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/marcmcvey","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a11f5e48b4981eafdf48211d1b9ea8e5c778fdfb132b43154b5b8bd2181f39c4.jpg","name":"Marc McVey"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1282587088156860416","wmProperty":"like-of","wmId":840751,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1282587088156860416","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/astenmies","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d0e4bb5c6ceeca1503e40591bb4a437e52b067d07d8b914df0a1d3e2b23a2456.jpg","name":"Asten Mies"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/719428727172521985","wmProperty":"like-of","wmId":840752,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-719428727172521985","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/chrstntdd","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2dfee215a30e8328ab6ced1a1934f630c7bb7b84e5308dacfe2053a17394d651.jpg","name":"Christian Todd"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294317031483822080","wmProperty":"repost-of","wmId":840732,"type":"entry","url":"https://twitter.com/ReactRally/status/1294317031483822080","likeOf":null,"author":{"url":"https://twitter.com/ReactRally","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/aed6d74d5bc3e8a9abde40967ee3a7b2deec26b038cd0c88c7cba56032415448.jpg","name":"🐙 React Rally 🤖 @ReactRally"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294317312116289537","wmProperty":"repost-of","wmId":840731,"type":"entry","url":"https://twitter.com/soooftie/status/1294317312116289537","likeOf":null,"author":{"url":"https://twitter.com/soooftie","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/7a3fe13910fb12d85dd6c515fdb7ea3d1e8d5e2dfe520bc61645d733dae9852a.jpg","name":"RRP"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294317372661063685","wmProperty":"repost-of","wmId":840730,"type":"entry","url":"https://twitter.com/rimildeyjsr/status/1294317372661063685","likeOf":null,"author":{"url":"https://twitter.com/rimildeyjsr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/dff312d10381f2a395ad803b4f83487e8184fd7a9e7e0d58df240669352c1544.png","name":"Rimil Dey"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294318439683653632","wmProperty":"repost-of","wmId":840728,"type":"entry","url":"https://twitter.com/chrisbiscardi/status/1294318439683653632","likeOf":null,"author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294318198142074881","wmProperty":"repost-of","wmId":840729,"type":"entry","url":"https://twitter.com/BondParkerBond/status/1294318198142074881","likeOf":null,"author":{"url":"https://twitter.com/BondParkerBond","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/83a9be6dddbe8ffd566960a02fad73f568afd7267e73fe1ad93ec51fbcc91053.jpg","name":"ParkerBond usePrivilege(stopRacism)"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294319495495000067","wmProperty":"repost-of","wmId":840726,"type":"entry","url":"https://twitter.com/maxcell/status/1294319495495000067","likeOf":null,"author":{"url":"https://twitter.com/maxcell","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a883720df399748ec3c5e79fdb00e3bcfa1aed681d0b2db5977e20976816186d.jpg","name":"Prince Wilson"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294318591962165249","wmProperty":"repost-of","wmId":840727,"type":"entry","url":"https://twitter.com/colbyfayock/status/1294318591962165249","likeOf":null,"author":{"url":"https://twitter.com/colbyfayock","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9d0f781d734c446a53a1ab7133dd1ec7cabe2cd50f4a42cfbbeefe3af9aa44db.jpg","name":"Colby Fayock #50reactprojects"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294320091937423362","wmProperty":"repost-of","wmId":840725,"type":"entry","url":"https://twitter.com/gauravssnl/status/1294320091937423362","likeOf":null,"author":{"url":"https://twitter.com/gauravssnl","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/53d2059e5524380d61e222701ed1f8ebc46053d00777eb5c440eeeed7bce1b28.jpg","name":"GAURAV 🐍"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294320922682253312","wmProperty":"repost-of","wmId":840724,"type":"entry","url":"https://twitter.com/aprilablon/status/1294320922682253312","likeOf":null,"author":{"url":"https://twitter.com/aprilablon","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/44cb5745bc94536893dd891fc6feeed0e0e2c0b31c837d12f8ab69b2c13e9575.jpg","name":"April Ablon"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/3115345708","wmProperty":"like-of","wmId":840722,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-3115345708","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/maxcell","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a883720df399748ec3c5e79fdb00e3bcfa1aed681d0b2db5977e20976816186d.jpg","name":"Prince Wilson"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1294316603744673793/1294322038597918721","wmProperty":"repost-of","wmId":840723,"type":"entry","url":"https://twitter.com/SilvestriCodes/status/1294322038597918721","likeOf":null,"author":{"url":"https://twitter.com/SilvestriCodes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/14866ca0db9839837e8ee054c621a07fc7f14d42951d9ab9e6308f32320c233b.jpg","name":"Jonathan Silvestri"},"published":"August 14, 2020","content":{"text":"Thank you @ReactRally for having me! 👋🏾\n\nI published a written version of my talk on server-side rendering best practices at: https://t.co/z"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1146168834895818755","wmProperty":"like-of","wmId":840721,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1146168834895818755","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/DividingByZer0s","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6c5dcf3b345c5344df7d072474ba52ba4da97888d7402ff406636a145e665540.jpg","name":"Cindy P."},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/948937839768678401","wmProperty":"like-of","wmId":840719,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-948937839768678401","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/asempa__","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1632b1ce9c3bcb11ced79298b7d7f0c46c73613b4d081bcc7b10e20408a7bd3a.jpg","name":"K.A.T - 20"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/28006594","wmProperty":"like-of","wmId":840720,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-28006594","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/colbyfayock","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9d0f781d734c446a53a1ab7133dd1ec7cabe2cd50f4a42cfbbeefe3af9aa44db.jpg","name":"Colby Fayock #50reactprojects"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/599338607","wmProperty":"like-of","wmId":840718,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-599338607","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/harshcrop","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/dd9665c41caddbd7e81d54cb5f7d50405093ed3883b24a96c10919329edf4c65.jpg","name":"Harsh Shah"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1106047627","wmProperty":"like-of","wmId":840717,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1106047627","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/iNikhilKumaran","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/91fea693f8e9209e8e42e47ce2ae23d9dba4de6d5ac8979e0bc3270faeb23ddd.jpg","name":"Nikhil Kumaran S 👨🏽‍💻⚡"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/2150118962","wmProperty":"like-of","wmId":840715,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-2150118962","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/BondParkerBond","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/83a9be6dddbe8ffd566960a02fad73f568afd7267e73fe1ad93ec51fbcc91053.jpg","name":"ParkerBond usePrivilege(stopRacism)"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/173326511","wmProperty":"like-of","wmId":840716,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-173326511","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/gauravssnl","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/53d2059e5524380d61e222701ed1f8ebc46053d00777eb5c440eeeed7bce1b28.jpg","name":"GAURAV 🐍"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/1176548308807892992","wmProperty":"like-of","wmId":840714,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-1176548308807892992","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/IAmKennyWhyte","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f094bca5daed1f645de3f10639891e87f7b2d2f905957ffbfb3271da0d44d356.png","name":"Kenny Whyte"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/48182269","wmProperty":"like-of","wmId":840712,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-48182269","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/shannon_crabill","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9fcdedd58c12234646f620daefb5bac0dec5a6a6e97262f753f51bce4ddcabf0.jpg","name":"Shannon Crabill"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/593846344","wmProperty":"like-of","wmId":840713,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-593846344","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/nishankt139","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f8a0a5e8e4a08b8f0f00794e6dbb3031f18e33cca44847f8f21dffa4b46a9ff5.jpg","name":"Nishank"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/240315182","wmProperty":"like-of","wmId":840711,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-240315182","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/2767713138","wmProperty":"like-of","wmId":840710,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-2767713138","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/rimildeyjsr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/dff312d10381f2a395ad803b4f83487e8184fd7a9e7e0d58df240669352c1544.png","name":"Rimil Dey"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/426356689","wmProperty":"like-of","wmId":840709,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-426356689","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/SilvestriCodes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/14866ca0db9839837e8ee054c621a07fc7f14d42951d9ab9e6308f32320c233b.jpg","name":"Jonathan Silvestri"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/34706733","wmProperty":"like-of","wmId":840707,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-34706733","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/ironorchid","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ff4dcb511616c664271e8da5648ff354052043832543517a86f5c5cc4137b18b.png","name":"Sarah Jean Thrasher"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/2775870896","wmProperty":"like-of","wmId":840708,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-2775870896","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/aprilablon","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/44cb5745bc94536893dd891fc6feeed0e0e2c0b31c837d12f8ab69b2c13e9575.jpg","name":"April Ablon"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/825167970188029952","wmProperty":"like-of","wmId":840706,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-825167970188029952","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/TheScifibrarian","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c802a184e64eab793e14950e9070ede7cd143151f88d65d7342bd7ddc2d0095b.jpg","name":"Scifibrarian"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1294316603744673793/142489586","wmProperty":"like-of","wmId":840705,"type":"entry","url":"https://twitter.com/waterproofheart/status/1294316603744673793#favorited-by-142489586","likeOf":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","author":{"url":"https://twitter.com/tfmoliveira","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/823b8ee926eb33bc90d3b87279120c0497b4eb27710780969df7d661585b4ea9.jpg","name":"Filipe Oliveira ⚛️"},"published":null,"content":null}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices/","slug":"/blog/server-side-rendering-react-hydration-best-practices/","prev":{"id":"240c3fa5-f4bc-5823-8afd-5f1fc3395e25","frontmatter":{"title":"6 Transformative Tech Conference Talks","category":["reflection"],"date":"2020-08-22T11:59:17.462Z","slug":"transformative-conference-talks","tags":["Conferences","video"],"redirects":null},"fields":{"slug":"/blog/transformative-conference-talks/"}},"next":{"id":"9ffc5c9a-3729-5579-9686-175ecf4b8a74","frontmatter":{"title":"Working In Public Book Notes","category":["reflection"],"date":"2020-08-09T19:41:03.738Z","slug":"working-in-public-notes","tags":["GitHub","Open-Source"],"redirects":null},"fields":{"slug":"/blog/working-in-public-notes/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}