Search code examples
reactjsmodernizrnoscript

Universal React without Javascript

What are best practices for invoking different CSS when the client for my server-rendered universal React page has Javascript disabled?

I've tried including Modernizr with className="no-js" on the html tag but it wasn't edited.

I've managed to get something to work as shown below but there must be a better way.

<link rel="stylesheet" href="/public/css/script.css" />
<noscript>
  <link rel="stylesheet" href="/public/css/noscript.css" />
</noscript>

I've looked for examples but haven't found anything relevant.

Solution

  • In a server rendered application, you can have one of many data sources:

    • query param
    • cookie
    • POST data

    The only input for server side code is the request made when loading up a page in your app in your browser. You may choose to configure the server during its boot (such as when you are running in a development vs. production environment), but that configuration is static.

    The request contains information about the URL requested, including any query parameters, which will be useful when using something like React Router. It can also contain headers with inputs like cookies or authorization, or POST body data.

    In a script/noscript mapping, you can setup one of several defaults:

    • Render noscript as the default, then override it by injecting script specific CSS via the CSSOM
    • Serve a noscript specific route as the default, then jump to the script route based on a cookie
    • Create a form which posts scripting capabilities to the server, then use that as a jump page to avoid noscript/script in the markup

    References