Almin on Next.js

いまつくってる新しいアプリで、せっかくなので新しいフレームワーク使おうとAlminNext.jsを使っている。

最初のころNext.jsのクライアントレンダリングとサーバサイドレンダリングの違いの意味がよくわかってなくて、Alminとどう連携させればいいのか試行錯誤が続いたんだけど、ようやくこうすればいいというのがわかった。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const dispatcher = new Dispatcher()
const storeGroup = new StoreGroup({
DataState: new DataStore(dataRepository)
})
const appContext = new Context({
dispatcher,
store: storeGroup,
options: {
strict: true
}
})
async function loadData(req) {
return new Promise(resolve => {
if(req) {
// サーバサイドだったらdbから読む
const data = db.data.find().toArray()
resolve(data)
} else {
// クライアントサイドだったらapiから取得
axios('/api/data.json')
.then((response) => {
resolve(response)
})
});
}
}
export default class extends React.Component {
static async getInitialProps ({req}) {
const data = await loadData(req)
return { data }
}
componentWillMount () {
// Alminにデータを渡すのはgetInitialPropsではなくここで
if (this.props.data) {
appContext.useCase(LoadDataUseCase.create()).execute(this.props.data)
}
}
}