Trường hợp của Prisma trong Jamstack

[theanh]

Phương pháp Jamstack bắt nguồn từ bài phát biểu của Matt Biilmann, CEO của Netlify, tại Smashing Conf của chính Tạp chí Smashing vào năm 2016.

Các trang Jamstack phục vụ nội dung tĩnh được dựng sẵn thông qua CDN và tạo nội dung động thông qua các dịch vụ vi mô, API và các hàm không có máy chủ. Chúng thường được tạo bằng các khuôn khổ JavaScript, chẳng hạn như Next.js hoặc Gatsby và các trình tạo trang tĩnh — ví dụ như Hugo hoặc Jekyll. Các trang Jamstack thường sử dụng quy trình triển khai dựa trên Git thông qua các công cụ, chẳng hạn như Vercel và Netlify. Các dịch vụ triển khai này có thể được sử dụng cùng với một CMS không có giao diện, chẳng hạn như Strapi.

Mục tiêu của việc sử dụng Jamstack để xây dựng một trang là tạo ra một trang có hiệu suất cao và tiết kiệm chi phí vận hành. Các trang web này đạt được tốc độ cao bằng cách hiển thị trước càng nhiều nội dung càng tốt và lưu trữ đệm các phản hồi trên "biên" (hay còn gọi là thực thi trên các máy chủ càng gần người dùng càng tốt, ví dụ: phục vụ người dùng ở Mumbai từ một máy chủ ở Singapore thay vì San Francisco).

Các trang web Jamstack tiết kiệm hơn khi chạy vì chúng không yêu cầu sử dụng máy chủ chuyên dụng làm máy chủ. Thay vào đó, chúng có thể cung cấp quyền sử dụng từ các dịch vụ đám mây (PAAS) / máy chủ / CDN với mức giá thấp hơn. Các dịch vụ này cũng được thiết lập để mở rộng theo cách tiết kiệm chi phí mà không cần các nhà phát triển thay đổi cơ sở hạ tầng và giảm khối lượng công việc của họ.

Công cụ khác tạo nên sự kết hợp này là Prisma — một ORM (ánh xạ quan hệ đối tượng) nguồn mở được xây dựng cho TypeScript & JavaScript.

Prisma là một công cụ JavaScript / TypeScript diễn giải lược đồ được viết theo tiêu chuẩn của Prisma và tạo ra một mô-đun an toàn về kiểu cung cấp các phương pháp để tạo bản ghi, đọc bản ghi, cập nhật bản ghi và xóa bản ghi (CRUD).

Prisma xử lý các kết nối đến cơ sở dữ liệu (bao gồm cả nhóm) và di chuyển cơ sở dữ liệu. Nó có thể kết nối với các cơ sở dữ liệu sử dụng PostgreSQL, MySQL, SQL Server hoặc SQLite (ngoài ra, hỗ trợ MongoDB đang ở bản xem trước).

Để giúp bạn hiểu rõ hơn về Prisma, đây là một số mã ví dụ cơ bản để xử lý CRUD của người dùng:

import { PrismaClient } from '@prisma/client'const prisma = new PrismaClient()const user = await prisma.user.create({ data: { name: Sam, email: '[email protected]', },})const users = await prisma.user.findMany()const updateUser = await prisma.user.update({ where: { email: '[email protected]', }, data: { email: '[email protected]', },})const deleteUser = await prisma.user.delete({ where: { email: '[email protected]', },})

Sơ đồ Prisma của dự án liên quan sẽ trông như sau:

datasource db { url = env("DATABASE_URL") provider = "postgresql"}generator client { provider = "prisma-client-js"}model User { id Int @id @default(autoincrement()) email String @unique name String?}

Các trường hợp sử dụng Prisma​

Được trang bị kiến thức về cách Prisma hoạt động, giờ chúng ta hãy khám phá nơi chúng ta có thể sử dụng nó trong các dự án Jamstack. Dữ liệu quan trọng trong hai khía cạnh của Jamstack: trong khi dựng trước các trang tĩnh và trên các tuyến API. Đây là những tác vụ thường được thực hiện bằng các công cụ JavaScript, chẳng hạn như Next.js cho các trang tĩnh và Cloudfare Workers cho các tuyến API. Phải thừa nhận rằng, những điều này không phải lúc nào cũng đạt được bằng JavaScript — ví dụ, Jekyll sử dụng Ruby! Vì vậy, có lẽ tôi nên sửa tiêu đề cho trường hợp Prisma trong Jamstack dựa trên JavaScript. Dù sao đi nữa, hãy tiếp tục!

Một trường hợp sử dụng rất phổ biến cho Jamstack là blog, nơi Prisma sẽ hữu ích cho một blog để tạo hệ thống phản ứng. Bạn sẽ sử dụng nó trong các tuyến API với một tuyến sẽ lấy và trả về số lượng phản ứng và một tuyến khác có thể đăng ký phản ứng mới. Để đạt được điều này, bạn có thể sử dụng các phương thức create và findMany của Prisma!

Một trường hợp sử dụng phổ biến khác cho Jamstack là trang đích và không có gì tuyệt hơn một trang đích có một số số liệu thống kê tuyệt vời! Trong Jamstack, chúng ta có thể kết xuất trước các trang này với số liệu thống kê được lấy từ cơ sở dữ liệu của mình mà chúng ta có thể đạt được bằng cách sử dụng các phương thức đọc của Prisma.

Tuy nhiên, đôi khi, Prisma có thể hơi quá mức cần thiết đối với một số tác vụ nhất định. Tôi khuyên bạn nên tránh sử dụng Prisma và cơ sở dữ liệu quan hệ nói chung cho các giải pháp chỉ cần một bảng cơ sở dữ liệu duy nhất, vì nó làm tăng thêm độ phức tạp phát triển không cần thiết trong những trường hợp này. Ví dụ, sẽ là quá mức cần thiết nếu sử dụng Prisma cho hộp đăng ký nhận bản tin email hoặc biểu mẫu liên hệ.

Các lựa chọn thay thế cho Prisma​

Vì vậy, chúng ta có thể sử dụng Prisma cho các tác vụ này, nhưng chúng ta có thể sử dụng rất nhiều công cụ khác để thực hiện chúng. Vậy, tại sao lại là Prisma? Hãy cùng xem xét ba lựa chọn thay thế cho Prisma và tôi sẽ cố gắng thuyết phục bạn rằng Prisma là lựa chọn tốt hơn.

Cơ sở dữ liệu/Dịch vụ đám mây​

Các dịch vụ như Airtable cực kỳ phổ biến trong không gian Jamstack (bản thân tôi đã sử dụng rất nhiều), chúng cung cấp cho bạn cơ sở dữ liệu (giống như nền tảng) mà bạn có thể truy cập thông qua REST API. Chúng rất thú vị khi sử dụng và tạo nguyên mẫu, tuy nhiên, Prisma được cho là lựa chọn tốt hơn cho các dự án Jamstack.

Đầu tiên, với chi phí là yếu tố chính trong sức hấp dẫn của Jamstack, bạn có thể muốn tránh một số dịch vụ này. Ví dụ, tại Hack Club, chúng tôi đã chi 671,54 đô la cho gói đăng ký Airtable Pro vào tháng trước cho nhóm nhỏ của mình (ôi trời!).

Mặt khác, lưu trữ cơ sở dữ liệu PostgreSQL tương đương trên nền tảng Heroku có giá 9 đô la một tháng. Chắc chắn có một lập luận ủng hộ các dịch vụ đám mây này dựa trên UI và API của chúng, nhưng tôi sẽ trả lời bằng cách chỉ cho bạn Studio của Prisma và ứng dụng khách JavaScript / TypeScript đã đề cập ở trên.

Các dịch vụ đám mây cũng gặp phải vấn đề về hiệu suất, đặc biệt là khi bạn, với tư cách là người dùng, không có khả năng thay đổi / cải thiện hiệu suất. Các dịch vụ đám mây cung cấp cơ sở dữ liệu đặt một trung gian giữa chương trình của bạn và cơ sở dữ liệu mà chúng đang sử dụng, làm chậm tốc độ bạn có thể truy cập vào cơ sở dữ liệu. Tuy nhiên, với Prisma, bạn đang thực hiện các lệnh gọi trực tiếp đến cơ sở dữ liệu của mình từ chương trình, giúp giảm thời gian truy vấn/sửa đổi cơ sở dữ liệu.

Viết Pure SQL​

Vì vậy, nếu chúng ta sẽ truy cập trực tiếp vào cơ sở dữ liệu PostgreSQL của mình, tại sao không sử dụng mô-đun node-postgres hoặc — đối với nhiều cơ sở dữ liệu khác — các trình điều khiển tương đương của chúng? Tôi cho rằng kinh nghiệm của nhà phát triển khi sử dụng máy khách Prisma khiến việc tăng tải một chút trở nên xứng đáng.

Điểm nổi bật của Prisma là các kiểu của nó. Mô-đun do Prisma tạo cho bạn hoàn toàn an toàn về kiểu — nó diễn giải các kiểu từ lược đồ Prisma của bạn — giúp bạn ngăn ngừa lỗi kiểu với cơ sở dữ liệu của mình. Hơn nữa, đối với các dự án sử dụng TypeScript, Prisma tự động tạo các định nghĩa kiểu phản ánh cấu trúc mô hình của bạn. Prisma sử dụng các kiểu này để xác thực các truy vấn cơ sở dữ liệu tại thời điểm biên dịch để đảm bảo chúng an toàn về kiểu.

Ngay cả khi bạn không sử dụng TypeScript, Prisma cũng cung cấp tính năng tự động hoàn thành/Intelli-sense, kiểm tra lỗi và định dạng thông qua tiện ích mở rộng Visual Studio Code. Ngoài ra còn có các plugin do cộng đồng xây dựng/bảo trì cho Emacs (emacs-prisma-mode), neovim (coc-prisma), Jetbrains IDE (Prisma Support) và nova (plugin Prisma) triển khai Prisma Language Server để đạt được xác thực mã. Tô sáng cú pháp cũng khả dụng cho nhiều trình soạn thảo thông qua các plugin.

Các ORM khác​

Tất nhiên, Prisma không phải là ORM duy nhất khả dụng cho JavaScript/TypeScript. Ví dụ, TypeORM là một ORM chất lượng cao khác cho các dự án JavaScript. Trong trường hợp này, tùy thuộc vào sở thích cá nhân và tôi khuyến khích bạn dùng thử nhiều ORM khác nhau để tìm ra ORM yêu thích của mình. Cá nhân tôi chọn Prisma để sử dụng cho dự án của mình vì ba lý do: tài liệu hướng dẫn chi tiết (đặc biệt là trang CRUD này, đây là một cứu cánh), các công cụ bổ sung trong hệ sinh thái Prisma (ví dụ: Prisma Migrate và Prisma Studio) và cộng đồng năng động xung quanh công cụ này (ví dụ: Prisma Day và Prisma Slack).

Sử dụng Prisma trong các dự án Jamstack​

Vậy, nếu tôi muốn sử dụng Prisma trong một dự án Jamstack, tôi phải làm như thế nào?

Next.js​

Next.js đang phát triển thành một khuôn khổ rất phổ biến trong không gian Jamstack và Prisma hoàn toàn phù hợp với khuôn khổ này. Các ví dụ bên dưới sẽ đóng vai trò là các ví dụ khá chuẩn mà bạn có thể chuyển vào các dự án khác bằng các công cụ JavaScript / TypeScript Jamstack khác nhau.

Quy tắc chính khi sử dụng Prisma trong Next.js là nó phải được sử dụng trong cài đặt phía máy chủ, điều này có nghĩa là nó có thể được sử dụng trong getStaticProps, getServerSideProps và trong các tuyến API (ví dụ: api/emojis.js).

Trong mã, nó trông như thế này (ví dụ lấy từ một ứng dụng demo mà tôi đã tạo cho một bài nói chuyện tại Prisma Day 2021, đó là một bức tường nhãn dán ảo):

import prisma from '../../../lib/prisma'import { getSession } from 'next-auth/client'function getRandomNum(min, max) { return Math.random() * (max - min) + min}export hàm async getRedemptions(username) { let allRedemptions = await prisma.user.findMany({ where: { name: username, }, select: { Redemptions: { select: { id: true, Stickers: { select: { nickname: true, imageurl: true, infourl: true }, }, }, distinct: ['stickerId'], }, }, }) allRedemptions = allRedemptions[0].Redemptions.map(x => ({ số: getRandomNum(-30, 30), ...x.Stickers, })) trả về allRedemptions}xuất mặc định hàm async RedeemCodeReq(req, res) { cho dữ liệu = chờ getRedemptions(req.query.username) res.send(data)}

Như bạn thấy, nó tích hợp rất tốt vào một dự án Next.js. Nhưng bạn có thể nhận thấy một điều thú vị: '../../../lib/prisma'. Trước đây, chúng tôi đã nhập Prisma như thế này:

import { PrismaClient } from '@prisma/client'const prisma = new PrismaClient()

Thật không may, điều này là do một lỗi trong hệ thống làm mới trực tiếp của Next.js. Vì vậy, Prisma khuyên bạn nên dán đoạn mã này vào một tệp và nhập mã vào từng tệp.

Redwood​

Redwood là một điều bất thường trong phần này, vì nó không nhất thiết phải là một khuôn khổ Jamstack. Nó bắt đầu dưới biểu ngữ đưa full stack vào Jamstack nhưng đã chuyển sang lấy cảm hứng từ Jamstack. Tuy nhiên, tôi đã chọn đưa nó vào đây vì nó có cách tiếp cận thú vị là đưa Prisma vào trong khuôn khổ.

Nó bắt đầu, như thường lệ, bằng cách tạo lược đồ Prisma, lần này là trong api/db/schema.prisma (Redwood thêm điều này vào mọi dự án mới). Tuy nhiên, để truy vấn và sửa đổi cơ sở dữ liệu, bạn không sử dụng máy khách mặc định của Prisma. Thay vào đó, trong Redwood, các đột biến và truy vấn GraphQL được sử dụng. Ví dụ, trong ứng dụng todo mẫu của Redwood, đây là đột biến GraphQL được sử dụng để tạo một todo mới:

const CREATE_TODO = gql` mutation AddTodo_CreateTodo($body: String!) { createTodo(body: $body) { id __typename body status } }`

Và trong trường hợp này, mô hình Prisma cho một todo là:

model Todo { id Int @id @default(autoincrement()) body String status String @default("off")}

Để kích hoạt đột biến GraphQL, chúng tôi sử dụng hàm useMutation dựa trên ứng dụng khách GraphQL của Apollo được nhập từ @redwoodjs/web:

const [createTodo] = useMutation(CREATE_TODO, { // Cập nhật bộ đệm của Apollo, hiển thị lại bản cập nhật các thành phần bị ảnh hưởng: (cache, { data: { createTodo } }) => { const { todos } = cache.readQuery({ query: TODOS }) cache.writeQuery({ query: TODOS, data: { todos: todos.concat([createTodo]) }, }) }, }) const submitTodo = (nội dung) => { createTodo({ variables: { body }, emotionalResponse: { __typename: 'Mutation', createTodo: { __typename: 'Todo', id: 0, body, status: 'loading' }, }, }) }

Với Redwood, bạn không cần phải lo lắng về việc thiết lập lược đồ GraphQL/SDL sau khi tạo lược đồ Prisma, vì bạn có thể sử dụng lệnh scaffold của Redwood để chuyển đổi lược đồ Prisma thành GraphQL SDL và dịch vụ — ví dụ: yarn rw g sdl Todo.

Cloudfare Workers​

Cloudfare Workers là một nền tảng phổ biến để lưu trữ Jamstack API, vì nó đặt mã của bạn vào "bờ vực". Tuy nhiên, nền tảng này có những hạn chế, bao gồm việc thiếu hỗ trợ TCP, mà Prisma Client truyền thống sử dụng. Mặc dù hiện tại, thông qua Prisma Data Proxy, điều đó là có thể.

Để sử dụng, bạn sẽ cần một tài khoản Prisma Cloud Platform hiện đang miễn phí. Sau khi bạn đã làm theo quy trình thiết lập (đảm bảo bật Prisma Data Proxy), bạn sẽ được cung cấp một chuỗi kết nối bắt đầu bằng prisma://. Bạn có thể sử dụng chuỗi kết nối Prisma đó trong tệp .env của mình thay cho URL cơ sở dữ liệu truyền thống:

DATABASE_URL="prisma://aws-us-east-1.prisma-data.com/?api_key=••••••••••••••••••"

Sau đó, thay vì sử dụng npx prisma generate, hãy sử dụng lệnh này để tạo ứng dụng khách Prisma:

PRISMA_CLIENT_ENGINE_TYPE=dataproxy npx prisma generate

Các yêu cầu cơ sở dữ liệu của bạn sẽ được chuyển tiếp và bạn có thể sử dụng Ứng dụng khách Prisma như bình thường. Đây không phải là một thiết lập hoàn hảo, nhưng đối với những ai đang tìm kiếm kết nối cơ sở dữ liệu trên Cloudfare Workers, thì đây là một giải pháp tương đối tốt.

Kết luận​

Để kết thúc, nếu bạn đang tìm cách kết nối các ứng dụng Jamstack với cơ sở dữ liệu, tôi sẽ không tìm đâu xa hơn Prisma. Kinh nghiệm của nhà phát triển, công cụ mở rộng và hiệu suất của nó khiến nó trở thành lựa chọn hoàn hảo. Next.js, Redwood và Cloudfare Workers — mỗi công cụ đều có cách sử dụng Prisma riêng, nhưng nó vẫn hoạt động rất tốt trong tất cả các công cụ đó.

Tôi hy vọng bạn thích khám phá Prisma cùng tôi. Cảm ơn bạn!

Đọc thêm​

• “Jamstack Rendering Patterns: The Evolution,” Ekene Eze
• “Interactive Learning Tools For Front-End Developers,” Louis Lazaris
• “Jamstack CMS: The Past, The Present and The Future,” Mike Neumegen
• “Smashing Podcast Episode 29 With Leslie Cohn-Wein: Netlify Dogfood The Jamstack như thế nào?,” Drew McLellan