Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move data cache into <script type="application/json"> tag #19

Open
overlookmotel opened this issue May 3, 2020 · 1 comment
Open

Move data cache into <script type="application/json"> tag #19

overlookmotel opened this issue May 3, 2020 · 1 comment

Comments

@overlookmotel
Copy link
Owner

At present, data cache is written to HTML doc as

<script>
(window["__react-lazy-data.DATA_CACHE"] = window["__react-lazy-data.DATA_CACHE"] || {}).data
  = {"factoryId": {"reqId": {"data": true} } }
</script>

Performance would be better if it were instead:

<script id="__react-lazy-data.DATA_CACHE" type="application/json">
{"factoryId": {"reqId": {"data": true} } }
</script>

and then cache read with...

window["__react-lazy-data.DATA_CACHE"] = JSON.parse(
  document.getElementById('__react-lazy-data.DATA_CACHE').textContent
);

Two reasons why this is advantageous:

  1. JSON.parse() is faster as browser knows it's JSON, and not having to use full JS parser
  2. Will not be blocked by a tight Content Security Policy (see [WIP] Strong CSP Support vercel/next.js#4943)
@overlookmotel
Copy link
Owner Author

overlookmotel commented May 3, 2020

Would require removal of preloadData() (#20). No easy way I can see to await loading of a <script type="application/json"> block later in the document.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant