You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GO BUSINESSのフロントエンド側を担当している林です。 この記事ではReact18で正式に実装されるSuspenseという機能について紹介します。 SuspenseとはSuspenseという機能はReact16.6で実験的コンポーネントとして追加されましたが、React18では正式な機能として実装されることになりました。Suspenseはデータの受け取り状態を検知するコンポーネントであり、データを受け取るまではfallbackで指定した要素を返し、データを受け取るとSuspenseで囲っている子要素を返すという動きをします。 これまではサーバーサイドからのデータの受け取り状態は以下のようにuseStateやuseEffectなどのReact hookを利用して自身で状態管理することがほとんとでしたが、 import React, {useState, useEffect} from
前提 Next.js TypeScript styled-components microCMS AWS S3 Cloud Front Route53 Next.jsのSSGで生成した静的ファイルをS3にアップロードして、静的なメディアサイトを作っています。 CMSはmicroCMSを利用していて、メディアの記事の部分をmicroCMSから配信しています。 やりたいこと Next.jsのSSGで作成した静的なメディアにおいて、全文検索機能を追加したいというのが今回のやりたかったことです。 next devでローカル開発してるときは、getStaticProps内が変更はいるたびに更新され、再buildされるので、うまくいったように見えてましたが、S3にあげてみると、うまくいかなかったので、その対策をしたかったです。 結論 microCMSの全文検索APIをつかう AWSのLambdaでエン
昨日の記事でContentfulの記事をAlgoliaのインデックスに登録したので、今回はアプリケーション側での実装方法についてまとめる。 このブログはNext.jsで構築しているので、検索UIの実装にはreact-instantsearchを利用した。 Algolia管理画面での設定前回のおさらいになるが、インデックスは↓として登録している。 { url: "記事URL", title: "タイトル", description: "記事概要", content: "MarkdownをPlainTextに変換した記事本文", objectID: "Contentfulの記事ID", }Indices => Configuration => Searchable attributes で検索対象とする属性を設定する。 今回は title と description を検索対象とした。 また、
Penmarkの河村です。 PenmarkではFirebaseを活用してスマホアプリを開発しています。Firebaseはモバイル開発に必要な機能の殆どを提供してくれます。ただ一つ足りないのがデータベースの検索機能です。No SQLであるFirestoreはリレーショナル・データベース(以降RDBと記載)のLIKE検索のような検索機能は有りません。 Penmarkの最も重要な機能であるシラバス検索を行うためにAlgoliaを使っていましたが、2022年度のシラバスデータ投入のタイミングでElasticsearchに移行しました。このため、全く同じサービス・機能を両方の検索エンジンを用いて実装したわけですが、両方で構築することで、2つのサービスはかなり異なるということがわかりました。 今回はAlgoliaとElasticsearchの2つの検索サービスについて、何がどう違うのかを整理することで
Server Componentとuseフック Next.js 13において、コンポーネントはサーバー側でレンダリングされるサーバーコンポーネントがデファクトになりました。 一方、 先日Reactに追加されたuseフックは、再レンダリングが走らないサーバーコンポーネントでは特に意識せずに利用する事が出来ますが import { use } from 'react' async function getTodoList() { // https://jsonplaceholder.typicode.com/ const response = await fetch('https://jsonplaceholder.typicode.com/todos'); const result = await response.json(); return result; } export defaul
概要 Next.js 9.3から getServerSideProps という仕組みが導入されました。 上記がそのドキュメントですが、これを読んで感動した私はつい語りたくなってしまいました、私情が多分に含まれております、ああそういう視点もあるんだくらいに見ていただければと思います。 僕自身は、SEOをあまり気にしないいわゆるSPAっぽいWebページのNext.jsでの開発を1年ちょいくらい業務でやっていて、今もNext.jsユーザーです。 「getServerSidePropsって何が良いの?なんで生まれたの?」 「なんでgetInitialPropsは非推奨なの?」 「Vercel製のSWRってライブラリあるけど、あれ何?」 「てかgetServerSidePropsとSWRって関係あるの?」 この辺の疑問をお持ちのNext.jsユーザーの方は是非ご一読ください。 ※過剰な煽りタイトルで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く