preactjs/preact-cli

Serialize and hydrate data from prerender-urls on the client.

Open

#784 opened on May 4, 2019

View on GitHub
 (4 comments) (5 reactions) (0 assignees)JavaScript (4,674 stars) (415 forks)batch import
enhancementhelp wantedneed more info

Description

It would be good if we could detect that prerender-urls has passed more than { url, title } as the data for a given route, and serialize that into the HTML:

<script type="text/props" id="appprops">
  { "url": "/profile/john", "profile": { "name": "John Doe" } }
</script>

Then we can pass these to <App /> when booting on the client.

Contributor guide

Tech stack
javascripthtml
Domain
frontendbuild system
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Preact CLI basicsprerendering knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the implementation of prerender urls in the preact cli source (likely in src/plugins or similar). Understand how the current serialization works for URLs and titles. Then, implement logic to check if additional data is provided and serialize it into a <script> tag with JSON. On the client, add hydration code to extract and pass that data to <App/>. Review existing hydration setup in the template files.