@artsy/fresnel

An SSR compatible approach to CSS media query based responsive layouts for ...

ReactNext.js
artsy/fresnelartsy.github.io/blog/2019/05/24/server-rendering-responsively@artsy/fresnel

README

@artsy/fresnel


The Fresnel equations describe the reflection of light when incident on an

interface between different optical media.


– https://en.wikipedia.org/wiki/Fresnel_equations

Installation


  1. ```sh
  2.   # React 18+
  3.   yarn add @artsy/fresnel

  5.   # React 17
  6.   yarn add @artsy/fresnel@6
  7. ```

Overview


When writing responsive components it's common to use media queries to adjust
the display when certain conditions are met. Historically this has taken place
directly in CSS/HTML:

  1. ```css
  2. @media screen and (max-width:
  3.   .my-container {
  4.     width: 100%;
  5.   }
  6. }
  7. @media screen and (min-width:
  8.   .my-container {
  9.     width: 50%;
  10.   }
  11. }
  12. ```

  1. ```html
  2. <div class="my-container" />
  3. ```

By hooking into a breakpoint definition, @artsy/fresnel takes this declarative
approach and brings it into the React world.

Basic Example


  1. ```tsx
  2. import React from "react"
  3. import ReactDOM from "react-dom"
  4. import { createMedia } from "@artsy/fresnel"

  6. const { MediaContextProvider, Media } = createMedia({
  7.   // breakpoints values can be either strings or integers
  8.   breakpoints: {
  9.     sm: 0,
  10.     md: 768,
  11.     lg: 1024,
  12.     xl: 1192,
  13.   },
  14. })

  16. const App = () => (
  17.   <MediaContextProvider>
  18.     <Media at="sm">
  19.       <MobileApp />
  20.     </Media>
  21.     <Media at="md">
  22.       <TabletApp />
  23.     </Media>
  24.     <Media greaterThanOrEqual="lg">
  25.       <DesktopApp />
  26.     </Media>
  27.   </MediaContextProvider>
  28. )

  30. ReactDOM.render(<App />, document.getElementById("react"))
  31. ```

Server-side Rendering (SSR) Usage


The first important thing to note is that when server-rendering with
@artsy/fresnel, all breakpoints get rendered by the server. Each Media
component is wrapped by plain CSS that will only show that breakpoint if it
matches the user's current browser size. This means that the client can
accurately start rendering the HTML/CSS while it receives the markup, which is
long before the React application has booted. This improves perceived
performance for end-users.

Why not just render the one that the current device needs? We can't accurately
identify which breakpoint your device needs on the server. We could use a
library to sniff the browser user-agent, but those aren't always accurate, and
they wouldn't give us all the information we need to know when we are
server-rendering. Once client-side JS boots and React attaches, it simply washes
over the DOM and removes markup that is unneeded, via a matchMedia call.

SSR Example


First, configure @artsy/fresnel in a Media file that can be shared across
the app:

  1. ```tsx
  2. // Media.tsx

  4. import { createMedia } from "@artsy/fresnel"

  6. const ExampleAppMedia = createMedia({
  7.   breakpoints: {
  8.     sm: 0,
  9.     md: 768,
  10.     lg: 1024,
  11.     xl: 1192,
  12.   },
  13. })

  15. // Generate CSS to be injected into the head
  16. export const mediaStyle = ExampleAppMedia.createMediaStyle()
  17. export const { Media, MediaContextProvider } = ExampleAppMedia
  18. ```

Create a new App file which will be the launching point for our application:

  1. ```tsx
  2. // App.tsx

  4. import React from "react"
  5. import { Media, MediaContextProvider } from "./Media"

  7. export const App = () => {
  8.   return (
  9.     <MediaContextProvider>
  10.       <Media at="sm">Hello mobile!</Media>
  11.       <Media greaterThan="sm">Hello desktop!</Media>
  12.     </MediaContextProvider>
  13.   )
  14. }
  15. ```

Mount `` on the client:

  1. ```tsx
  2. // client.tsx

  4. import React from "react"
  5. import ReactDOM from "react-dom"
  6. import { App } from "./App"

  8. ReactDOM.render(<App />, document.getElementById("react"))
  9. ```

Then on the server, setup SSR rendering and pass `mediaStyle` into a `