---
title: Remix + Pagefind で全文検索
tags: 
author: [溝口浩二](https://convert.docswell.com/user/8723156)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/G75GKXW274.jpg?width=480
description: [Remixドキュメント日本語版](https://remix-docs-ja.techtalk.jp)に無料の全文検索機能を入れた話。
published: June 18, 24
canonical: https://convert.docswell.com/s/8723156/5RXNLW-2024-06-18-234804
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/G75GKXW274.jpg)

Remix + Pagefind
Remix Docs Japanese with free full-text search functionality.
Remix &quot;ワインと鍋&quot; Meetup
Press Space for next page


# Page. 2

![Page Image](https://bcdn.docswell.com/page/9J2YWXQ1JR.jpg)

coji
A web developer based on Tokyo, Japan.
Love the things that are very useful and
simple to use, made by a small group of
people
Remix
Conform
DuckDB
Turso
Also love tech talks.
I decided to name my own company
TechTalk inc.


# Page. 3

![Page Image](https://bcdn.docswell.com/page/DEYGL8W4EM.jpg)

Remix Docs Japanese
A website I maintained to help my Japanese co-workers learn and understand the &quot;Remix way&quot;.
https://github.com/coji/remix-docs-ja
Tech Stacks
Remix v2.9.2 (single fetch)
Fly.io + Cloudflare Cache
Markdown based
Translated using Gemini 1.5 Flash


# Page. 4

![Page Image](https://bcdn.docswell.com/page/VJNG4Q9678.jpg)

Full-text Search Functionality


# Page. 5

![Page Image](https://bcdn.docswell.com/page/YE9WQD2RE3.jpg)

Pagefind
Provides search functionality for websites with minimal bandwidth and no infrastructure.
https://pagefind.app
Open source library written in Rust
Multilingual and Japanese support out of the box
Provides a NodeJS indexing API and browser-based search API, along with a CLI and default UI


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GE8NG35G7D.jpg)

How Full-text search works


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LELPGVYX7R.jpg)

Indexing
When building the app, also perform index building simultaneously.
const buildIndex = async () =&gt; {
const { index } = await pagefind.createIndex({})
const docs = await glob(&#039;docs/**/*.md&#039;)
for (const filename of docs) {
const { dir, name } = path.parse(filename)
const pathname = path.join(&#039;/&#039;, path.basename(dir), name)
const doc = await getDoc(pathname)
await index.addCustomRecord({
content: doc.html,
meta: { title: doc.attributes.title.toString() },
language: &#039;ja&#039;,
url: pathname
})
}
await index.writeFiles({ outputPath: &#039;public/pagefind&#039; })
}
await buildIndex()


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4JM4QGN37W.jpg)

Indexing (cont.)
pagefind.js must be removed from the bundle by specifying external in rollupOptions.
vite.config.ts
export default defineConfig({
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
unstable_singleFetch: true,
},
}),
tsconfigPaths(),
],
build: { rollupOptions: { external: [&#039;/pagefind/pagefind.js?url&#039;] } },
})


# Page. 9

![Page Image](https://bcdn.docswell.com/page/PJRW8ZDR79.jpg)

Search
clientLoader: Execute searches solely on the browser side. It also works in SPA mode.
Form
&lt;fetcher.Form action=&quot;/resources/search&quot;&gt;
&lt;Input id=&quot;query&quot; name=&quot;q&quot; placeholder=&quot;Search...&quot; /&gt;
&lt;Button size=&quot;sm&quot;&gt;Search&lt;/Button&gt;
&lt;/fetcher.Form&gt;
clientLoader
export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) =&gt; {
const url = new URL(request.url)
const pagefind = (await import(
&#039;/pagefind/pagefind.js?url&#039;
)) as unknown as Pagefind
await pagefind.init()
const ret = await pagefind.search(url.searchParams.get(&#039;q&#039;))
const results = await Promise.all(ret.results.map((result) =&gt; result.data()))
return { results }
}


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PEXP891Y7X.jpg)

Conclusion
By combining Remix and Pagefind, you can build a website with full-text search functionality that is incredibly
simple and low-cost.
Pagefind is a free, open-source search library that supports Japanese out of the box
No server-side infrastructure is required, and search processing can be completed entirely in the browser,
significantly reducing operational costs
By leveraging Remix’s clientLoader, you can seamlessly implement client-side search It’s an ideal solution
for adding full-text search to Markdown-based documentation
I recommend to try building a user-friendly and powerful search-enabled website using Remix and
Pagefind!


# Page. 11

![Page Image](https://bcdn.docswell.com/page/3EKDKP24JD.jpg)

Thank You


# Page. 12

![Page Image](https://bcdn.docswell.com/page/L73RZX4DJ5.jpg)

One more thing


# Page. 13

![Page Image](https://bcdn.docswell.com/page/87DYR2Q27G.jpg)

One more thing
Remix ２年前から使ってるけど、当時はそんな案件(クライアント)はまったくなかった。
どっかで Remix の仕事あったらいいのにな〜と思っていた。そういう人は今もいるはず。
プロダクション利用も徐々に増えてきたけど、まだ少数。
そういう企業で Remix に慣れてるエンジニアのニーズはあるようだ。
近い将来、既存 react-router アプリの v7 へのマイグレーションニーズが出てきそう。
Remix エンジニア採用したい人と、Remix 仕事したい人のマッチングをできるといいな。
そうだ: Remixドキュメント日本語版に Remix を使う仕事の募集情報載ってるといいかも？
Web 2.0 の頃にあった Job Board 的な。日本国内限定だけど。
採用情報へのリンク、載せたい方いらっしゃいますか？
大変になってきたら無料では無理かもだけど、そこまで盛り上がる気はちょっとしないかな。
。？
興味ある方いらっしゃる前提で: あとで相談させてください。
XのDMなど
ついでに Remix を企業・プロダクションで使ってる方を Meetup にお誘いしたい。
会場提供もしてもらえるといいな！


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VJP6W1LLE8.jpg)

Thank You (本当)


