Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why is React hydration data within a script tag, commented out?

See original GitHub issue

I’m working on an issue to optimize open source library for server rendering: github.com/shakacode/react_on_rails/pull/660.

We’re considering breaking away from placing react hydration data in a meta tag and moving into maybe a script tag.

Why does Airbnb puts react hydration data inside of an <script type=“application/json” data-key=“foobar”></script> per the screen shots below? Is this related to XSS or performance reasons?

view-source:https://www.airbnb.com/s/Panorama--BC--Canada?guests=10&adults=10&children=0&infants=0&checkin=12%2F18%2F2017&checkout=12%2F25%2F2017&ss_id=19nvfbwh&ss_preload=true&source=bb&page=1&s_tag=pMJm3GqR&allow_override[]=

2017-02-13_15-04-16

2017-02-13_15-34-39

CC: @goatslacker

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:15

Top GitHub Comments

2reactions

ljharbcommented, Feb 14, 2017

Some older browsers will execute any script block, even if it’s type is “application/json”.

Best practice is to always comment it out to ensure nothing can ever execute.

1reaction

ljharbcommented, Feb 19, 2017

Interesting - that does sound like something we want to handle, then.

Top Results From Across the Web

Why Efficient Hydration in JavaScript Frameworks is so ...

Most JavaScript frameworks need to hydrate top-down. This is as true for React as it is for Svelte. So if your app contains...

Hydrating text content from Server-Side Rendering | Tan Li Hau

Partial hydration in React is a mechanism to partially hydrate a server-rendered result while other parts of the pages are still loading the ......

Warning: Text content did not match. Server: "I'm out" Client

The hydration issue occurs because the HTML rendered on the browser doesn't match the one generated on the server. In your case this...

Keeping Server-Side Rendering Cool With React Hydration

hydrates a site from HTML to React. In order to avoid issues with the hydration reconciliation process, you can wrap any side effects...

React on Twitter: "Suspense also enables selective hydration ...

Suspense also enables selective hydration. React 18 can start hydrating the HTML before all JavaScript code loads. Specifically, content wrapped in <Suspense> ...