Comments (5)
About streaming rendering? nope! I've not yet had a reason to need it - either I use preact-render-to-string (which is fast enough that streaming would only add overhead) or I render into undom
or jsdom
using Preact's DOM renderer and "flush" the HTML at some later point in time.
from preact.
There are some good demos of this now, I think we can close this ticket. That being said, streaming server rendering is definitely on the backlog.
from preact.
@d6u Currently server-rendering is achieved using preact-render-to-string. It has similar limitations to the issue you linked, do you have any suggestions for working around those?
Personally I do static pre-rendering, so async components are not part of my server-side pipeline. Plus with Preact my frontend bundles are small enough that often server-rendering is unnecessary (obviously this depends if you're building something content-centric, or using something like the application shell architecture).
It might be worth throwing an issue into preact-render-to-string, though it seems like supporing async static rendering would be done via a module that straddles both preact
and preact-render-to-string
.
from preact.
@developit Thanks for your explanation. I see your argument (and I think it's valid). But for the topic of server rendering, I think the key is not async rendering. The problem can be easy solved by putting a placeholder in the rendered string, or break the rendered string apart, so the incomplete content can be inserted.
class List extends Component {
render({items}) {
return (
<ul>{items.map(({id}) => <Item itemId={id} />)}</ul>
);
}
}
class Item extends Component {
render({itemId}) {
// need to fetch data for each item
return (
<li></li>
);
}
}
Assuming Item needs to fetch data from server in order to display content. In the first render pass, we can just render the List on server.
<ul>
<some-place-holder-for-item/>
<some-place-holder-for-item/>
<some-place-holder-for-item/>
</ul>
After we got the data, we call renderToString
on each <some-place-holder-for-item/>
we can complete this template. This can be done by return a special data structure from renderToString
, e.g. array ['<ul>', '<some-place-holder-for-item/>', ... , '</ul>']
and users can build tools around this API.
from preact.
@developit any news?
from preact.
Related Issues (20)
- Implement onscrollend event attribute for TypeScript JSX
- TypeScript JSX focus events don't have consistent case HOT 5
- Typescript issues in 10.19.4+ with @mui/material HOT 5
- Provide a boundary between Components and DOM HOT 8
- `preact` `10.9.4+` requires double click or move pointer out of `@headlessui/react` `Tab` panel/button HOT 2
- Unmount hooks should be called during the commit phase to ensure consistency with React HOT 2
- When I attempt to extend HTMLAttributes every intrinsic element becomes of type any HOT 2
- Current plan for event types? HOT 3
- onFocusIn and onFocusOut events incorrectly set HOT 4
- Cannot read properties of undefined (reading '__m')
- `hydrate` doesn't replace attributes at root replaced node HOT 4
- Unable to use hooks in compiled package
- Compatibility issue: Jest mock works in React / fails in Preact when using ForwardRef in a component HOT 2
- Using useState leads to error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__H') HOT 3
- Render mui cache inside shadow dom leaves style sheets in head and content unstyled HOT 2
- `defaultValue` incorrectly (?) diffed against prerendered HTML
- Preact 10.20 + @mui/x-data-grid v7 causes datagrid to appear multiple times in dev-mode, but not in preview-mode HOT 1
- Performance of unmounting a context provider
- Runtime error when using an external react module HOT 5
- Incorrect namespacing of MathML elements
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact.