Skip to content

Asynchronously loaded state is missing from pre-rendered document #777

Open
@DmytroYeremieiev

Description

@DmytroYeremieiev

Steps to reproduce:

  1. create an empty folder and run preact create default my-project
  2. replace stateless component from home/index.js file with next:
import { h, Component } from 'preact';
import style from './style';

class Home extends Component {
	state = {userId: '', title: ''};
	componentDidMount() {
		console.log("[Main] componentDidMount")
		fetch('https://jsonplaceholder.typicode.com/todos/1')
			.then(response => response.json())
			.then(json => this.setState(json))
	}
	render() {
		return <div className = {style.home} >
			<p>this.state.userId: {this.state.userId}</p>
			<p>this.state.title: {this.state.title}</p>
		</div>
	}
}
export default Home;
  1. run npm run serve
  2. Go go /build directory and observe index.html content

Expected:
A document to be prepopulated with asynchronous data:

...
<div class="home__MseGd">
       <p>this.state.userId: 1</p>
       <p>this.state.title: delectus aut autem</p>
</div>
...

Actual:

<div class="home__MseGd">
       <p>this.state.userId:</p>
       <p>this.state.title:</p>
</div>

The asynchronously loaded state is missing from pre-rendered document.

- Node version - v10.15.1
- npm version - 6.4.1
- Operating system - macOS 10.14.4
- CLI version - 2.1.0
- Browser - Google Chrome Version 73.0.3683.103

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions