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)
- What is the `jsx` attribute in TypeScript types?
- `currentComponent` not set when testing Preact hooks using ESM HOT 3
- useErrorBoundary causes double rendering of list item
- Bad state isolation between components HOT 1
- 10.18.2 regression: Cannot read properties of undefined HOT 4
- Regression in 10.18.2 when used with preact-custom-element HOT 1
- Do these types belong to HTMLAttributes? HOT 2
- Contexts with the same name interfere with each other HOT 1
- Missing typescript types for MathML HOT 2
- Make render-function curried HOT 5
- Component don't rerender if prop changes in short period of time HOT 3
- 10.18 regression: setState triggers DOMException: Node.insertBefore: Child to insert before is not a child of this node HOT 12
- Radix UI / Select component in preact HOT 1
- `useId` generates duplicate identifiers in some cases when calling `render` from `@preact/compat` multiple times HOT 3
- Request: setProperty() Export HOT 2
- Add `x_google_ignoreList` (Ignore-listing code) support to sourcemaps HOT 11
- Incorporate preact to NEXTJS. HOT 3
- Focus lost when moving child with `key` HOT 3
- [preact/compat] onTouchMoveCapture not processed
- TS errors for contentEditable attribute
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.